AirPods image sequence animation using ScrollTrigger
I'm trying to recreate Apple's Airpods Pro presentation page with ScrollTrigger.
This is what I'm trying to make:
See the Pen ZEbGzyv by j-v-w (@j-v-w) on CodePen
My idea is to use an array which holds all the images and then make use of ScrollTrigger.update() to update the img src based on the scrolling position.
See the Pen poybrBd by make96 (@make96) on CodePen
For what it's worth, I did something similar to the Apple site for a client. I tried two approaches, both using individual img elements (not a sprite) positioned fixed behind the normal content.
The first I tried to create animations and ScrollTriggers for each section of the page and then sync those to the correct timing with the background images. While this worked (and was easier to get pinning working), it proved to be quite difficult to keep things synced on different viewports.
