Framer Tutorial: Making The AirPods Pro Scroll Animation

🎓 Framer University: https://framer.university
👉 Create a free Framer account: https://framer.university/free-account

In this Framer tutorial, you'll learn how to create an image sequence scroll animation on your Framer website. I'll show you how to set up your components and variants to create this effect in Framer, and I'm gonna also hand you a code override that you can use to play an image sequence on scroll on your website. After watching this video, you'll be able create any image sequence animation on your Framer website.

Starter file + project remixes:
(Frame.io) https://framer.university/resources/f...
(AirPods Pro) https://framer.university/resources/i...


0:00 - Introduction
0:28 - Original effects
1:18 - Why use image sequence instead of a video?
2:08 - Converting a video into an image sequence
2:24 - Remix link and starter file
3:04 - Inserting the image sequence
5:05 - Creating a component and variants
7:20 - Adding the component to the website
8:23 - Creating the code override
10:11 - Final image sequence animation
10:41 - Optimizing it for different breakpoints
10:57 - Free Framer Course
11:40 - Inserting the image sequence (2)
12:38 - Creating a component and variants (2)
14:22 - Adding the component to the website (2)
14:48 - Creating the code override (2)
16:01 - Final image sequence animation (2)


Follow me on:
X: https://x.com/learnframer
Instagram:   / framer.university