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

@framer.university

6 ай бұрын

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

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

@framer.university

6 ай бұрын

Glad I could help! :)

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

@framer.university

6 ай бұрын

Hope you like it, mate :)

This is really great and loved it🤩🔥

@framer.university

6 ай бұрын

Thanks a lot :)

Thanks for great video and for code ! ❤

@framer.university

6 ай бұрын

You're welcome! :)

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

@framer.university

6 ай бұрын

pleasure helping you! :)

amazing, super helpful

@framer.university

6 ай бұрын

Glad to hear this, Josh :)

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 brother ✨😊🔥🔥

@framer.university

6 ай бұрын

No problem 😊 happy to help!

great video, thanks.

@framer.university

6 ай бұрын

Thanks a lot, Himansu :)

love this :)

@framer.university

6 ай бұрын

thank you so much, Himani! :)

Legendary!

@framer.university

4 ай бұрын

Appreciate it. 🫡

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

@framer.university

6 ай бұрын

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

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?

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

6 ай бұрын

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?

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

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

2 ай бұрын

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.

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

4 ай бұрын

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

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! Is it possible to change the image in the notebook? Thank you :)

@framer.university

6 ай бұрын

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.

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

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

6 ай бұрын

Hey thanks :) Unfortunately there isn’t :/

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

6 ай бұрын

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.

how do i get the images used in this video please

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.

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?

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

@framer.university

6 ай бұрын

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/

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

@framer.university

4 ай бұрын

20-24 should be enough!

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

@framer.university

5 ай бұрын

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

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.

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

3 ай бұрын

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

3 ай бұрын

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

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

@framer.university

5 ай бұрын

It can’t be triggered by another section unfortunately.

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

4 ай бұрын

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

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

5 ай бұрын

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

@killedzinn4132

5 ай бұрын

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

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

@framer.university

5 ай бұрын

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?

@framer.university

6 ай бұрын

Honestly, i have no clue.

@kishangautam7506

2 ай бұрын

Yes it works I've used it in past

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

@framer.university

4 ай бұрын

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

where i can images like air pods and laptop ??

@framer.university

4 ай бұрын

Spline, Blender

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

@framer.university

6 ай бұрын

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

where I can get videos (: ?

@framer.university

6 ай бұрын

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.

@framer.university

5 ай бұрын

Did you exactly copy the code for the override?

@petermain1211

5 ай бұрын

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

5 ай бұрын

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

did you create the code override yourself?

@framer.university

6 ай бұрын

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

@framer.university

6 ай бұрын

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

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

@Akssss4

4 ай бұрын

What do you mean?

@animeshjha4957

8 күн бұрын

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