GSAP - Snippets: Unterschied zwischen den Versionen

Aktuelle Version vom 31. März 2022, 05:21 Uhr

Links[Bearbeiten]

GSAP
https://greensock.com/cheatsheet/
https://greensock.com/get-started
https://codepen.io/GreenSock/
https://css-tricks.com/writing-smarter-animation-code/ *****
https://greensock.com/forums/topic/17401-multiple-timelinemax-oncomplete-function-help/

Cool Stuff

https://greensock.com/forums/topic/18128-svg-stroke-dasharray-quick-tip/

Read On

https://greensock.com/forums/topic/22793-how-to-work-with-new-labels-object-in-gsap-3/

Einfache Animationen[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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
  }
});

Positioning[Bearbeiten]

Relative position/timing prefix[Bearbeiten]

Relative “>” and “<” position prefix This feature helps with positioning animations in a timeline. It puts a tween relative to the previous tween’s start or end time and removes the need to add labels through your code.

gsap.method('selector',{}, "<" ) //Inserts a tween at the start of the previous tween

gsap.method('selector',{}, ">" ) //Inserts a tween at the end of the previous

Centering[Bearbeiten]

gsap.set(".content", {
  position: "absolute",
  top: "50%",
  left: "50%",
  xPercent: -50,
  yPercent: -50
});

// Center the content on page load
gsap.set('.content', {xPercent: -50});

// ...
// Some time later animate the width
.to('.content', {
  width: '100vw',
  duration: 2,
}, "<")

Keyframes[Bearbeiten]

Anstatt mehrerer Tweens kann man auch mehrere TweenProperties als keyframes kombinieren und hat weniger Tipparbeit. Aber Keyframes bieten noch einiges mehr:

https://greensock.com/understanding-keyframes/

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
]});

Timelines[Bearbeiten]

Reset Timeline[Bearbeiten]

If you want to set the values to the original position set in the animation you can move the the playhead's position before you kill it:

tl.pause(0).kill(true);
ScrollTrigger.getById("trigger1").kill(true); // you have to do a extra kill for ScrollTrigger if used

If you want to remove all inline styles you can use clearProps:

tl.kill(true);
ScrollTrigger.getById("trigger1").kill(true);
gsap.set("#element", {clearProps: true});

Globale Timeline kontrollieren (timeScale)[Bearbeiten]

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[Bearbeiten]

Richtung der Rotation[Bearbeiten]

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

Scroll To[Bearbeiten]

document.querySelector("button").addEventListener("click", function() {
  gsap.to(window, { duration: 0.75, scrollTo: ".target" });
});

GSAP Scroll Trigger[Bearbeiten]

Update: Die beste Möglichkeit ist mit dem neuen ScrollTrigger Plugin.

GSAP - ScrollTrigger
https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
https://greensock.com/scrolltrigger Main Page
https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation
https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen)

Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)

Good Practice and Time Savers[Bearbeiten]

Timeline schneller abspielen[Bearbeiten]

tl.timeScale(3).repeat(2);

Bestimmten Teil abspielen[Bearbeiten]

tl.play("myLabel");

wobei die Labels so definiert werden:

.addLabel("out3");

oder

.to("#myElement",{duration:1, rotation:90}, "in3");

Schleifen[Bearbeiten]

Geeignet für gleiche Animation auf mehreren Elementen hintereinander. Dabei übergeben wir in einer Schleife ein DOM Element und erstellen in einer anonymen Funktion den Tween.

$(".fade-in").each(function(){
  var tween = gsap.from($(this), {duration: 0.5, scale: 0.7, y: '+=30', ease: Linear.easeNone });
  // possible with ScrollMagic
  var scene = new ScrollMagic.Scene({
    triggerElement: this,
  })
    .setTween(tween);
});

Default Werte[Bearbeiten]

gsap.timeline({defaults:{ease:"power2.out", duration:5}})
    .to(".selector1", {x:200})
    .to(".selector2", {y:500})

Nesting Timelines[Bearbeiten]

Functions to create timelines[Bearbeiten]

Responsive Animations & Media Queries[Bearbeiten]

https://greensock.com/forums/topic/18719-how-to-manage-gsap-animation-in-mobile-device/
https://greensock.com/forums/topic/18280-truly-responsive-animations/
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

Plugins[Bearbeiten]

MotionPathPlugin[Bearbeiten]

GSAP - MotionPathPlugin

SVGMorph[Bearbeiten]

gsap.to("#circle", {duration: 1, morphSVG:"#hippo"});

ScrollTrigger[Bearbeiten]

GSAP - ScrollTrigger

https://codepen.io/noeldelgado/pen/BaogqYy

// Array erstellen um Animation auf viele Elemente anzuwenden
    var panels = gsap.utils.toArray(".panel");
    let container = document.querySelector('.scroll-container')
    
    tl = gsap.timeline();
    tl.to(panels, { //each panel
        xPercent: -100 * (panels.length -1), // move complete width i.e. -500%
        scrollTrigger: {
            trigger: ".scroll-container",
            pin: true,
            markers: true,
            end: () => "+=" + document.querySelector(".scroll-container").offsetWidth,
        }
    });

// ODER

panels.forEach((panel, i) => {
    gsap.to(panel, {
        //...
    }
})

Helpers[Bearbeiten]

gsap loader[Bearbeiten]

gsap.registerPlugin(ScrollTrigger);

const images = gsap.utils.toArray('img');
const loader = document.querySelector('.loader--text');
const updateProgress = (instance) => 
  loader.textContent = `${Math.round(instance.progressedCount * 100 / images.length)}%`;

const showDemo = () => {
  document.body.style.overflow = 'auto';
  document.scrollingElement.scrollTo(0, 0);
  gsap.to(document.querySelector('.loader'), { autoAlpha: 0 });
  // do some cool stuff
  gsap.utils.toArray('section').forEach((section, index) => {
    const w = section.querySelector('.wrapper');
    const [x, xEnd] = (index % 2) ? ['100%', (w.scrollWidth - section.offsetWidth) * -1] : [w.scrollWidth * -1, 0];
    gsap.fromTo(w, {  x  }, {
      x: xEnd,
      scrollTrigger: { 
        trigger: section, 
        scrub: 0.5 
      }
    });
  });
}
// check how much is loaded
imagesLoaded(images).on('progress', updateProgress).on('always', showDemo);