Dope website header! Scroll controlled image sequence in Next.js. Apple inspired. Plus free code!

This scroll controlled image sequence can be found on world class sites such as the Apple AirPods Pro landing page. I’ve implemented something similar on a global project for a leading retail brand.
In this video I'll share how to build a scrolling image sequence to in Next.js with GSAP to help take your web experiences to the next level.
Shoutout to Derek Elliott for the 3D assets!
Ps. If you benefit from me sharing the code or recording this video please give this a thumbs up and consider subscribing for more frontend content in the future. Peace!
#javascript #react #gsap #pragmattic
🔗 Resources
Image sequence files: github.com/pra...
Repo on GitHub: github.com/pra...
Live Site: pragmattic-tut...
3D Artist: www.derrk.com/
Canvas Images: developer.mozi...
GSAP ScrollTrigger: gsap.com/docs/...
🔖 Steps
1. Prepare image sequence frames
2. Load images, and draw first frame into canvas
3. Setup scroll trigger to update canvas images
4. Animate in
5. Add heading transitions using scroll trigger
6. Handle viewport resize using debounced value
🤝 Want help on a project?
Email [e-mail] to start a conversation

[@pragmattic-dev]

Thanks for all the support on this video. After reviewing the code I've made a few changes which are in the repo main branch now. The 2 ScrollTriggers have been combined into 1 because they use the same trigger element, start and end values. The heading timeline can be created immediately which is more desirable than creating it after animating in, incase a user scrolls before the entry animation finishes! Enjoy!

[@DerekElliott]

Looks awesommmmeee! Fun to see the BTS or how this all comes together

[@pragmattic-dev]

Team work makes the dream work!

[@anvrag]

Too good. Thanks for this 💯

[@sinasadrzadeh4783]

Best in the game!

[@pragmattic-dev]

@@sinasadrzadeh4783 we making progress my friend 😎