GSAP

Tools for

JavaScript Animation

But for usage like CSS animation, you don't need to calculate timing and movement relationship.

...and easily add momentum effect

Basic usage

gsap.to(targetDOM, {
  y: '+=200',
  duration: 1, // in 1 seconds
});

<div id="targetDOM" style="transform3d(0, 200px, 0)" />

Or for entry

gsap.from(targetDOM, {
  y: '-=200',
  duration: 1, // in 1 seconds
});

<div id="targetDOM" style="transform3d(0, -200px, 0)" />
.
.
.
<div id="targetDOM" style="transform3d(0, 0, 0)" />

Timeline

var timeline = gsap.timeline({repeat: 2, repeatDelay: 1});
timeline.to('#targetDOM', {x: 100, duration: 0.5});
timeline.to('#targetDOM', {y: 50, duration: 1});
timeline.to('#targetDOM2', {opacity: 0, duration: 0.5});

like keyframes, but control multiple elements

DOM1

DOM2

DOM1

Timeline Control

timeline.pause();
timeline.resume();
timeline.seek(1.5);
timeline.reverse();

// Nesting
timeline.add(timeline2);

// Labeling
timeline.addLabel("spin", 3);
timeline.to(".class", {duration: 2, rotation: "+=360"}, "spin");
timeline.play("spin");

MorphSVG

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

Physics2D

gsap.to(element, {
  duration: 2, 
  physics2D: {
    velocity: 300, 
    angle: -60, 
    acceleration: 50, 
    accelerationAngle: 180,
  },
});

ScrollTrigger

Combine timeline animation with user's scroller.

const timeline = gsap.timeline({
  scrollTrigger: {
    trigger: '.container',
    pin: true,
    start: 'top top',
    end: '+=500',
    scrub: 1, // momentum
    snap: {
      snapTo: 'labels',
      duration: {
        min: 0.2, 
        max: 3,
      },
      delay: 0.2,
      ease: "power1.inOut",
    },
  },
});

Misunderstand

const timeline = gsap.timeline({
  scrollTrigger: {
    trigger: '.container',
    start: 'top top',
    end: '+=500',
  },
});

Start with "top top" not means x:0, y:0, it says the scroll container relation with targetDOM (trigger).

The "top top" told GSAP, start point at the trigger boundary box's top (first top) touch the scroller's (default is viewport) boundary box's top (second top).

Pinned

const timeline = gsap.timeline({
  scrollTrigger: {
    trigger: '.container',
    pin: true,
    start: 'top top',
    end: '+=500',
    scrub: 1, // momentum
  },
});

Use the pin option, GSAP will create a virtual box with the total scroll height assigned (500px), and set the trigger element position fixed when scrolling between it.

It's easy usage for scroll animation with canvas.

https://nespresso-momento.pages.dev/