Bearbeiten von „GSAP - Snippets“

== Einfache Animationen ==

gsap.to(".logo", {duration: 2, x: 300}); // Dies nennt sich eine Timeline. 300px nach rechts bewegen in 2s mit Standardwerten (ease out...)
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8"}); // CSS Eigenschaften die normal ein - haben, werden als Camelcase geschrieben.
// Eigenschaften mit Zeichen in Anführungsstrichen. Fast alles lässt sich Animieren.
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8", borderRadius: "50%", border: "4px solid white"});

=== Ease In Out ===

 https://greensock.com/docs/v3/Eases
 gsap.to(".logo", {duration: 1, x:300, ease: "power2.inOut"});

Ease Möglichkeiten

 //OLD ==> NEW
 Elastic.easeOut ==> "elastic.out" //or just "elastic" because ".out" is the default flavor
 Elastic.easeIn ==> "elastic.in"
 Elastic.easeInOut ==> "elastic.inOut"
 Elastic.easeOut.config(1, 0.5) ==> "elastic.out(1, 0.5)" //or just "elastic(1, 0.5)"

 //and the other configurable eases are much easier!:
 SteppedEase.config(5) ==> "steps(5)"
 SlowMo.ease.config(0.5, 0.8) ==> "slow(0.5, 0.8)"
 RoughEase.ease.config({points:40}) ==> "rough(40)"
 ExpoScaleEase.config(0.5, 3) ==> "expoScale(0.5, 3)"

== Staggering ==
<syntaxhighlight lang="javascript">
gsap.to(".class", {
  x:"+=100",
  duration:1,
  stagger: 0.5 //simple stagger of 0.5 seconds
});

//or get advanced:
gsap.to(".class", {
  x:"+=100",
  duration:1,
  stagger: {
    amount:2,
    from:"center",
    grid:"auto",
    onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween
  }
});
</syntaxhighlight>

== Keyframes ==

Anstatt mehrerer Tweens kann man auch mehrere TweenProperties als keyframes kombinieren und hat weniger Tipparbeit.
<syntaxhighlight lang="javascript">
gsap.to(".class", {keyframes: [ //<-- an array of keyframes!
  {x:100, duration:1},
  {y:200, duration:1, delay:0.5}, //create a 0.5 second gap
  {rotation:360, duration:2, delay:-0.25} //overlap by 0.25 seconds
]});
</syntaxhighligh>

== Globale Timeline kontrollieren ==

gsap.globalTimeline.timeScale(0.1); //slow everything down
gsap.globalTimeline.pause(); //stop everything, though you might want to use gsap.exportRoot() instead so that you can exclude delayedCalls()

== Rotation ==
=== Richtung der Rotation ===
 rotation:"270_short" //animates in the shortest direction!
 rotation:"270_cw"    //animates clockwise
 rotation:"270_ccw"   //animates counter-clockwise