Apple-Style Image Sequence Animation On Scroll with GSAP In Webflow (No Lottie, No Code Tutorial) скачать в хорошем качестве

Apple-Style Image Sequence Animation On Scroll with GSAP In Webflow (No Lottie, No Code Tutorial)

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 ✅ This is the first full Webflow tutorial that replicates Apple’s original image-sequence technique — not with Lottie, but the real thing. 📂 Helpful Resources: Supasaito: https://www.supasaito.com/en?utm_sour... Link to the cloneable: https://webflow.com/made-in-webflow/w... Video Frame Extractor: https://frame-extractor.com/ Compress Image Online: https://compressimage.io/ Webflow Developers API: https://developers.webflow.com/data/r... Postman: https://www.postman.com/ Image URLs Generator: https://gsap-video-animation-on-scrol... 🔥 If you liked the video, feel free to leave a comment, hit the like button, and subscribe to my channel. 😁 --- My Webflow public profile: https://webflow.com/@francescocastro We can talk on LinkedIn:   / francescocastronuovo   Or we can get to know each other on X: https://x.com/francescoflow Or why not? Even on Instagram:   / francescocastronuovo   --- 0:00 Intro 2:19 Frame extraction process 5:48 Image compression 10:08 Obtaining assets with Webflow API and Postman 18:59 Implementing the scrolling effect 24:05 How the code work 25:46 How to configure the effect 29:46 Outro #webflow #madeinwebflow #nocode #webflowtutorial #gsap #accessibility