Parallax

Parallax creates depth by moving elements at different speeds.

Example

Background moves slower.

gsap.to(".bg", {
  y: -200,

  scrollTrigger: {
    trigger: ".section",
    scrub: true
  }
});

Foreground

gsap.to(".content", {
  y: -50,

  scrollTrigger: {
    trigger: ".section",
    scrub: true
  }
});

Effect

Background  ← Slow

Foreground  ← Fast

Creates 3D depth illusion.

Image Parallax

gsap.to(".image", {
  yPercent: -20,

  scrollTrigger: {
    trigger: ".image",
    scrub: true
  }
});