GSAP Image Sequence Scrub (Apple AirPods)

Learn how to recreate the iconic scroll-triggered animation from Apple’s AirPods Pro page — directly inside Webflow, using GSAP and ScrollTrigger, without touching any code.
In this step-by-step Webflow tutorial, you’ll learn:
- How to extract frames from a video using a free online tool
- How to compress and upload images to Webflow
- How to use the Webflow API (with Postman!) to retrieve all your asset URLs
- How to implement scroll-driven animations using GSAP
- How to configure everything using custom HTML attributes — no JavaScript knowledge required
✅ Not with Lottie, but the real thing.
👉 Watch on YouTube: https://youtu.be/JO-g2vz7BYE
📂 Helpful Resources:
- Video Frame Extractor: https://frame-extractor.com/
- Compress Image Online: https://compressimage.io/
- Webflow API: https://developers.webflow.com/data/reference/rest-introduction
- Postman: https://www.postman.com/
- Image URLs Generator: https://gsap-video-animation-on-scroll.webflow.io/image-urls-generator