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
Watch video Framer Tutorial: Making The AirPods Pro Scroll Animation online without registration, duration hours minute second in high quality. This video was added by user Framer University 26 January 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 15,72 once and liked it 57 people.