Framer Tutorial: Making The AirPods Pro Scroll Animation

[@davidinfroy]

You are the sauce in the fries, simply the best in the Framer community.

[@framer.university]

Ah :)) never got this before haha! Thanks a lot, David 🫶

[@binodtamang9622]

Thank you so much been searching how to do this in Framer for long time. :)

[@framer.university]

Glad I could help! :)

[@-_SamsulHadi]

you're a legend brother, super helpful and now make a tutorial on how to retrieve data from CMS Framer :)

[@framer.university]

Thanks for the kind words. What do you mean by how to retrieve data from cms?

[@waldenschafer6239]

Great Tutorial! Is it possible to change the image in the notebook? Thank you :)

[@framer.university]

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.

[@achrafelothmani8236]

you're a legend brother, i cannot thank you enough

[@framer.university]

pleasure helping you! :)

[@artekal3d]

This is really amazing! I thought you used 3D using Spline or something but didn't think image sequence can be used like this! Great job! Btw, i was wondering, you make code overrides for various stuff like this, starry parallax button, etc. Are you going to make tutorials on how to make them for people who can get into coding a llitle bit?

[@lexmilleranimation]

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?

[@KxRAnimations]

This aint working for me. When the scroll component goes through each frame it tends to flicker. It works fine on Safari but not on Chrome or Arc or any other brower

[@framer.university]

I know! Sorry! Working on a new solution! 🫶

[@karimismail]

for some reason mine starts at last frame and plays backwards? My variants and layers are in the right order though...

[@willm3102]

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?

[@framer.university]

Hey thanks :) Unfortunately there isn’t :/

[@frameraddict]

Great lesson, will try to recreate it :) I think you could use spline 3d models export, that would be easier than image sequence.

[@framer.university]

thanks! As mentioned in the video: image sequence will have better performance and better quality.

[@kishangautam7506]

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

[@RaphaelGibara]

I've trying to the a similar animation (laptop opening) with scroll transforms, like the ivision pro tutorial, so that I can have a video playing inside the laptop screen. BUT, i've been having a hard time, LOL... would love to see a tutorial

[@framer.university]

Do you have an example?

[@broo_brand]

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?

[@framer.university]

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.

[@bidishanath104]

​@@framer.university Heyy. Thank you but still the problem is occurring. It is a 4 sec video with 52 frames. I have been stuck for days now. Please help me.

[@framer.university]

@@bidishanath104 send me a remix in Twitter DMs please! I'll try taking a look :)

[@edanriell]

Thanks for great video and for code ! ❤

[@framer.university]

You're welcome! :)

[@lucasritzeldesign]

Your video is perfect bro, but I have a question about the image sequence asset, how can I get these sequences? Which sites do you recommend to get sequences or videos that have these assets and then convert them into sequences? Because they look like product scenes, and I'm not sure how to search or search.

[@framer.university]

I think there isn’t really a shortcut to get these, unless you generate something with AI and then sequence the video (with online tool). AI and all other big brands make custom 3D renders for these. You can learn Spline or Blender and make something for yourself.

[@michelfarah14]

was just going to look for a tutorial to do this today! thanks 🎉

[@framer.university]

Hope you like it, mate :)

[@treyunderwood]

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.

[@framer.university]

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.

[@Rajauiuxdesigner]

This is really great and loved it🤩🔥

[@framer.university]

Thanks a lot :)

[@artcgix]

Wow! Thank you so much! This is great! Up to how many images do you recommend doing this without having issues of loading/speed?

[@framer.university]

It always depends on individual image sizes. I'd experiment.

[@grzegorzrak1567]

Great video! Very useful. I just need some information on how to make the animated sequence sticky? That way it will stay in one place while scrolling until the end of the image sequence. Any idea how to do that? I watched your Apple Vision Pro Scroll video but still I can't figure out how to do it.

[@aliasgaramir3414]

couldnt you just add trigger frames , and then use scroll variant to get the same effect with the laptop, i mean the code override sure is an easy way out but i would like to know your thoughts on it

[@glagraphy6533]

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?

[@kishorekumarseenivasan]

hey try adding smooth scroll component, it should work fine without glitch :)

[@glagraphy6533]

@@kishorekumarseenivasan its already, the problem is from the code…

[@gianlucacroci3120]

This tutorial is cool but the converter tool (like other ones) tend to decrease the quality of frames and the frame rate

[@framer.university]

Thanks! :) Btw: It's not an issue. The priority is file size, and performance rather than sharpness.

[@JoshWarner1987]

amazing, super helpful

[@framer.university]

Glad to hear this, Josh :)

[@himansumaharana221]

great video, thanks.

[@framer.university]

Thanks a lot, Himansu :)

[@kaldarges]

Thank you so much brother ✨😊🔥🔥

[@framer.university]

No problem 😊 happy to help!

[@gyanbuoy]

While previewing, the scroll animation only shows 5-6 random frames from the sequence. It's not playing the sequence from the start. PLEASE HELP!!!

[@framer.university]

Framer made an update that broke this. Working on an updated version.

[@glagraphy6533]

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.

[@framer.university]

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!

[@glagraphy6533]

​@@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?

[@haleemulhassan9158]

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

[@gabrielegelfofx]

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....

[@muskandhanani2697]

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

[@ItsssRossi]

Is there any way to make it in hover rather than scroll?

[@jakeysea]

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.

[@framer.university]

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.

[@NoelDanielAlcantara]

awsome tuts! question, where can I get free 3d product video that I can practice on?

[@framer.university]

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/

[@-_SamsulHadi]

Can it be triggered based on another section? In the video the trigger is on the component screen

[@framer.university]

It can’t be triggered by another section unfortunately.

[@jaisonpearo7500]

I have a doubt when I publish the website. The animation lags and jitters on the first scroll but eventually gets better. You have a solution?

[@MuthuKumaran-u5j]

Sir can I please know where you will find these images, videos and frames.

[@tijnsturkenboom]

Legendary!

[@framer.university]

Appreciate it. 🫡

[@user-tf7jg5yn1x]

How can I change the picture on the laptop. Sorry for asking I’m learning framer since 2 days haha

[@framer.university]

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.

[@komarisb]

What optimal frame rate for rendering animation in Blender do you recommend for this from your experience?

[@framer.university]

20-24 should be enough!

[@westernocclusion]

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

[@framer.university]

I’m only an expert in Framer stuff. Anything built outside of the Framer app is outside my area of expertise.

[@westernocclusion]

@@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

[@youness_daoudi]

Where can we get high quality product video like this??

[@framer.university]

You can make them in Spline, Blender or other 3D softwares.

[@amanbekdosmukhambetov1676]

Is it possible to do this in lottie, using bodymoving in After Effect?

[@framer.university]

Honestly, i have no clue.

[@kishangautam7506]

Yes it works I've used it in past

[@SilentProvisionBangla]

where & How can I get those variant images like this?

[@framer.university]

Right click and inspect website. There is a network tab with all the assets.

[@devozi7812]

how do i get the images used in this video please

[@irzq_z]

where I can get videos (: ?

[@framer.university]

Replied to you on the other video (iPhone 15 Pro Tutorial).

[@westernocclusion]

does this works only on framer? i'm coding pure react app here

[@framer.university]

Can be done in react too. Idk how tho. I am a no-coder :)

[@bootcampgamer7204]

where i can images like air pods and laptop ??

[@framer.university]

Spline, Blender

[@KalyaniWalunj-c9o]

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?

[@mt000mp]

did you create the code override yourself?

[@framer.university]

Partly, yes with ChatGPT. Then I needed the help of a professional. I am not a coder unfortunately :D

[@framer.university]

@@mt000mp of course! Here's his Twitter: twitter.com/ClementLIONNE

[@unsharded8503]

Where can I find image sequences to use for my website?

[@framer.university]

You can for example create 3D animations in Spline and turn those into image sequences.

[@Heydanzzz]

Convert Jpg to webp? Image airpods that

[@petermain1211]

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.

[@framer.university]

Did you exactly copy the code for the override?

[@petermain1211]

@@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.

[@framer.university]

Please send a remix link! I’ll take a look

[@manolomaru]

✨😎😮😯😮😎👍✨

[@framer.university]

🫡

[@LIGHT-de1zb]

Day 45 of asking a proper payment method for framer india!

[@Akssss4]

What do you mean?

[@animeshjha4957]

U will have to anyhow use an international card (card not from india).