Parallax

Lesson 2

Multiple layers get different y tween values via scrollTrigger: { scrub: true }. scrub: true ties the animation directly to scroll position — there is no playback; the tween follows the scroll. The deeper the layer, the larger the Y offset, creating a depth illusion.

Source Code script.js

gsap.registerPlugin(ScrollTrigger);

// Hero: bg drifts DOWN (lags behind), content floats UP (races ahead)
// Opposite directions = maximum perceived depth
gsap.to('.hero-bg', {
  y: '35vh',
  ease: 'none',
  scrollTrigger: {
    trigger: '.hero',
    start: 'top top',
    end: 'bottom top',
    scrub: true,
  },
});

gsap.to('.hero-content', {
  y: '-20vh',
  ease: 'none',
  scrollTrigger: {
    trigger: '.hero',
    start: 'top top',
    end: 'bottom top',
    scrub: true,
  },
});

// Scene: three layers with clearly distinct speeds
// bg (far) drifts down, mid floats up a little, fg (close) floats up fast
gsap.to('.scene-bg', {
  y: '25vh',
  ease: 'none',
  scrollTrigger: {
    trigger: '.scene',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true,
  },
});

gsap.to('.scene-mid', {
  y: '-20vh',
  ease: 'none',
  scrollTrigger: {
    trigger: '.scene',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true,
  },
});

gsap.to('.scene-fg', {
  y: '-40vh',
  ease: 'none',
  scrollTrigger: {
    trigger: '.scene',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true,
  },
});