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

cloneable,  madeinwebflow,  attributes,  gsap,  whilescrolling,  animationonscroll,  canvas,  responsive,  customcode,  gsapscrolltrigger,  scrolltrigger,  gsapanimation,  airpods