Framer Tutorial: Making The AirPods Pro Scroll Animation
Вставка
- Опубліковано 27 лип 2024
- 🎓 Framer University: framer.university
👉 Create a free Framer account: 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) framer.university/resources/f...
(AirPods Pro) 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: x.com/learnframer
Instagram: / framer.university
You are the sauce in the fries, simply the best in the Framer community.
Ah :)) never got this before haha! Thanks a lot, David 🫶
You're legend, mind blowing
A video on how to make code overrides for the things that aren't possible yet in framer would be amazing
Thank you so much been searching how to do this in Framer for long time. :)
Glad I could help! :)
This is really great and loved it🤩🔥
Thanks a lot :)
was just going to look for a tutorial to do this today! thanks 🎉
Hope you like it, mate :)
you're a legend brother, i cannot thank you enough
pleasure helping you! :)
Thanks for great video and for code ! ❤
You're welcome! :)
amazing, super helpful
Glad to hear this, Josh :)
Thank you so much brother ✨😊🔥🔥
No problem 😊 happy to help!
great video, thanks.
Thanks a lot, Himansu :)
love this :)
thank you so much, Himani! :)
Legendary!
Appreciate it. 🫡
you're a legend brother, super helpful
and now make a tutorial on how to retrieve data from CMS Framer :)
Thanks for the kind words. What do you mean by how to retrieve data from cms?
Great lesson, will try to recreate it :) I think you could use spline 3d models export, that would be easier than image sequence.
thanks!
As mentioned in the video: image sequence will have better performance and better quality.
Great Video! Is there any way I could make it "play" until the middle of the sequence when opening the site and then complete the sequence when scrolling?
You are magic! Thank you so much for all you do for us. Seriously. You're amazing. I was hoping you might be able to give some helpful advice on how i can scroll animate in this same way using a lottie file. i created a bunch of data visualization assets for a school project creating a landing page to crown the men's tennis GOAT. Any advice from would be so greately appreciated. i created my animations in the jitter app. thank you in advance for any help you can give.
You can either export them as video and play the video on scroll, or add an override to the lottie so it plays on scroll. Lemme know if you need help.
Hi @Framer University Thank you, your lessons are great! I'm using a PNG Sequence on my website, and I encountered an issue with their display in different browsers. For example, Safari handles the PNG sequence format well, but in Chrome, there's flickering during the image sequence scrolling. I tried replacing the PNG format with WebP, and now everything works fine in Chrome, but in Safari, the images are displayed with errors, such as overlapping. As far as I know, this problem can be solved by specifying in the code which image format to show for Safari and Chrome. But how can I do this in Framer?
I have a question. Instead of using component and then doing all this manual labor work of changing states, cant we turn entire sequence into a lottie json file, and then just play/stop it via scroll transform? This is how webflow does it, which is so easy
Great tutorial ! however, there's flicking between images as I scroll on the final result, even on the remix file as well, where should I fix in the code for making it smooth?
You can fix it by making an additional 0th variant where all images are visible: yes and with opacity 0, and you connect and interaction from this to the first variant (where only the first image is visible: yes and rest is not) with appear trigger and instant transition with a small 0.05s delay.
This will force load all images on load.
Lemme know if it works.
Wow! Thank you so much! This is great! Up to how many images do you recommend doing this without having issues of loading/speed?
It always depends on individual image sizes. I'd experiment.
Great Tutorial! Is it possible to change the image in the notebook? Thank you :)
Unfortunately not. You'd need to create a render, but we - of course - don't have access to that file. It's all made by Frame.
Thanks so much for helping me level up my no code skillset! Quick question-how do you get all of these image assets? I’ve watched all of your videos (Apple Watch, iPhone, AirPods, etc) and always wondered how you get the image assets.
Thanks for the kind words :)
When you open a website and you go into inspect mode and then to "Network" tab, you'll see all assets listed.
Is there any way to make it in hover rather than scroll?
Hey thanks for sharing the tut. Do you know if there is there a plugin or shortcut to repeat this kind of dubious hide/show action?
Hey thanks :)
Unfortunately there isn’t :/
how do i get the images used in this video please
for some reason mine starts at last frame and plays backwards? My variants and layers are in the right order though...
Cool! I don't understand why is not possible to embed a Lottie file bigger than 5MB but we can upload a bunch of images which the total amount of memory space is more than 5MB....
You can purchase a plan from framer that allows you to upload 20mb worth of files. This is just how they are making money, it is wt it is
awsome tuts! question, where can I get free 3d product video that I can practice on?
Thanks!
You can casually browse landing page and look for great video on them or alternatively you can check out this site:
dr-vfx.com/creative-3d-product-animation-videos-examples/
the code is not working well, when i scroll it start to make like a flicker effect, its like black, image, black image, its posible to fix this?
How can I change the picture on the laptop. Sorry for asking I’m learning framer since 2 days haha
Hey! Unfortunately you can’t. I’m using the assets from the original website in this demo.
You need to have your own image sequence to use with this technique.
This laptop close anim is for example a 3D render png sequence.
I have one question, i made 2 image animations in 1 page, the first one works perfect, but the other one its on fixed postion and i want to make that animation start at the middle of the page, Is there any option to make this posible? Or maybe a code that works with the position in sticky, that would be amaising, great tutorial.
yes unfortunately the code seems to be having issues if the frame is set to sticky. i might try creating a version that works with sticky. sorry!
@@framer.university No worries, I love framer, and i love Framer University. As a startup you are making big changes in the game of web developing, i appreciate a lot your work. THANK YOU SO MUCH, and where I find the new code when this is ready?
Where can we get high quality product video like this??
You can make them in Spline, Blender or other 3D softwares.
where & How can I get those variant images like this?
Right click and inspect website. There is a network tab with all the assets.
For some reason it is getting stuck on the first frame...I have followed every step as you said still can't make it happen....What can I do?
Can it be triggered based on another section? In the video the trigger is on the component screen
It can’t be triggered by another section unfortunately.
What optimal frame rate for rendering animation in Blender do you recommend for this from your experience?
20-24 should be enough!
does this works only on framer? i'm coding pure react app here
Can be done in react too. Idk how tho. I am a no-coder :)
Is it possible to do this in lottie, using bodymoving in After Effect?
Honestly, i have no clue.
Yes it works I've used it in past
where i can images like air pods and laptop ??
Spline, Blender
if i do this outside framer, but using framer-motion as well, do i need to have, for each image, an img tag that's hidden too? i'm a bit confused
I’m only an expert in Framer stuff. Anything built outside of the Framer app is outside my area of expertise.
@@framer.university Thank you for the response. I managed to find a way. Just need a bit more adjustment on the code. Thanks a lot
Where can I find image sequences to use for my website?
You can for example create 3D animations in Spline and turn those into image sequences.
where I can get videos (: ?
Replied to you on the other video (iPhone 15 Pro Tutorial).
For the life of me I can't recreate. how many of the overrides are needed? I can see you example work, but when I copy it over to my project, and match your override word for word, it doesn't work. Has something changed? Very odd.
Did you exactly copy the code for the override?
@@framer.university I copied it exactly. I changed the 66 value to 24 (I have 23 variants in my component). I even named all my variants the same as yours ($0001 etc). the component just hangs on the first frame. I noticed two other overrides in your file, I moved those over also (just in case) but no luck.
Please send a remix link! I’ll take a look
did you create the code override yourself?
Partly, yes with ChatGPT. Then I needed the help of a professional. I am not a coder unfortunately :D
@@mt000mp of course!
Here's his Twitter: twitter.com/ClementLIONNE
Day 45 of asking a proper payment method for framer india!
What do you mean?