GSAP Parallax Scrolling

Parallax Scrolling Introduction

Parallax scrolling, when used correctly, can add a beautiful aesthetic to your web page. When used incorrectly it can be a bit annoying.

Parallax scrolling is an affect that foreground move faster than background.

gsap.defaults({ease: 'none', duration: 1});

let tl = gsap
  .timeline({
    scrollTrigger: {
      trigger: '.demoWrapper',
      start: 'top 25%',
      end: '+=100',
      toggleActions: 'restart none none reverse',
      markers: true,
    },
  })

  .from('.background', {y: 50}) // slowest
  .from('.middleground', {y: 150}, 0)
  .from('.foreground', {y: 250}, 0) // foreground move more distance than background within the same amount of time
  .from('.text', {y: 500}, 0); // fastest

The Beauty of Parallax (video games): https://youtu.be/z9tBce8eFqE

Stunning Parallax Scrolling Examples on CodePen: https://youtu.be/-8u43gle_wE

Aerial SVG car parallax

Here's another twist on a parallax animation. This time I'm using SVG artwork with some elements moving in opposing directions. At the end of the day it's still just different things moving at different speeds as you scroll.

Also check out Google Web Designer Parallax gallery.

Use Case

My website landing page

Reference

https://www.w3schools.com/howto/howto_css_parallax.asp