Lab 03

Tune scroll motionon real content.

Five of the setups I use most, built with GSAP and ScrollTrigger, with every knob exposed. Change the easing, the scrub, the pin, the trigger points. Watch the frame rate. Then copy the exact code.

Progress

60 fpsScroll inside the stage

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

GSAP for this setup

gsap.from(".card", {
  y: 80,
  scale: 0.92,
  autoAlpha: 0,
  duration: 1,
  stagger: 0.12,
  ease: "power3.out",
  scrollTrigger: {
    trigger: section,
    start: "top 85%",
  },
});

Scrub

Ties the animation to the scrollbar. Off means it plays once when the trigger is hit; a number adds smoothing in seconds.

Holds the section in place while the scroll distance plays out. The stage uses transform pinning, the same as this site.

Markers

Shows where start and end are measured. Turn them on whenever a trigger fires at the wrong moment.