Framer Tutorial: Advanced Scroll Zoom Animation

[@adityaarun23]

What makes these so good is seeing you troubleshoot problems in real-time (the overflow property always gets me too haha), love it!

[@framer.university]

Thanks! Haha, I don't cut those out on purpose, so you can see as I solve these little issues. 🫶

[@tanyameshram445]

These videos are truly very helpful, thank you so much! Just one thing to probably consider would be how much zoom in/zoom out happens each time you're showing something in detail. I found it tough to focus because of that but maybe it's just me. Really helpful videos, regardless! 😊

[@framer.university]

Thank u sm for the valuable feedback! 🫶 In my most recent videos, i reduced the zoom level. Let me know if these the new videos are easier to look at.

[@kimcruz3889]

thanks so much for thiiiisss!!! keep em coming! 🥳

[@framer.university]

Happy to help! :) More to come ✨✨

[@leemahlangu19]

As usual, great video. I wish you did it for every picture so we can see how it works all together with different text for each. Looking forward to the course, I'm sure it will be great.

[@MrSaky1996]

CFBR

[@fotoflo]

exactly what i was looking for, thanks!

[@framer.university]

Happy to hear I could help :)

[@prodbyeddyy]

Your videos are very helpful! Thank you so much

[@framer.university]

I’m so glad to hear this! 🙏 I’ll try to make them even better. 🚀

[@byjohnpatrick]

Another great video! 🔥💪🏽

[@framer.university]

Appreciate it!! 🙌

[@waleedahmed8153]

Always amazing and great to watch || Awesome stuff easy to learn || Love from Pakistan

[@framer.university]

Thank you so much for the support 🫶

[@praveensolanki8747]

Bro, you are doing great work. Thanks 😊

[@framer.university]

It's my pleasure🙌🙌

[@bingers_tv]

Really cool, thanks!

[@framer.university]

Glad you liked it!

[@capt.723]

Hi! I've find your video superrr helpful while doing a client project. Love it! I'm successfully follow your tutorial for the scroll animation! But, I'm still wondering on how the text appear in the end of the image zoom 😅Do you have another video tutorial for that? Thanks!!

[@framer.university]

Hey! Thanks a lot ✨ That text is simply a relative positioned frame below the sticky. So as the sticky is sticking to the top of the page, other sections below it are scrolling over it. I recommend digging into the remix :) lmk if it helps!

[@capt.723]

@framer.university Ohh, okay. I think I'll try it on the layer! Thank you!

[@allyamri]

What a great tut!

[@framer.university]

Thank you so much! :)

[@pijussermuksnis2297]

Hi, is it posible to make the photos as a horizontal carusel (no need animated, just with a click button on both sides to move the carusel) and apply this effect to each photo?

[@framer.university]

yes you can use the carousel or slideshow component from the insert panel for this but you wont be able to add this scroll animation to them.

[@nasimmahamud6304]

Thank you for the another great video,,,

[@framer.university]

My pleasure 😇

[@ericcontreras839]

Awesome work! Hey quick question could this be possible with videos insetad of images

[@framer.university]

Of course! You’d just need to replace the frame containing the image to a video component and upload your video there. :)

[@angelicamorais221]

Hi! This is an excellent tutorial. 😍 Unfortunately, I couldn’t achieve a good result even using a high-resolution image. When it scales up, it gets very distorted! Is there any solution for this?

[@framer.university]

Sorry about that! I don't think that we can make it any better unfortunately :(

[@coreyburglar1639]

When using these multiple x scale effects the images and also text lose their quality pretty significantly. Is there a way to counter that?

[@des7638]

So damn Clever. thank you!

[@framer.university]

Happy to help 🙌

[@KaveriKTheKodda]

I thought makestack was just Ctrl-Enter, not Alt-Ctrl-Enter :: 7:30

[@framer.university]

⌥ + ⌘ + ↩ = Add stack (frame with layout enabled) ⌘ + ↩ = Add frame (simple frame)

[@atomparish]

Two best tools to learn in design right now are Framer and Rive

[@framer.university]

Totally agree!

[@hiteshsinghbisht3632]

but how did you got the zoom in effect in the first place?

[@abayismailov5594]

good morning! can we change text information depend on image? for example we wanna news section make like this

[@kreativethinker5987]

When will the course be released! Been waiting for ages :)

[@framer.university]

Courses coming this year! Stay tuned and sorry for the delay. Wanna make sure I give out something exceptional.

[@kreativethinker5987]

@@framer.university Can't wait! Been waiting for this course especially. Your content is awesome and I'm sure this course will be too! Thanks for the effort you're putting in this :)

[@vizualblaststudio]

Hey Broh, ilove all your videos!!! its easy to learn Framer. Can yo Replicate the scroll effect with a lottie file, like a Ipod scroll transition, like the apple Website?..Tks!!

[@framer.university]

Yes it is definitely possible. With some code of course. Check out this remix I made a while ago: apple-watch.framer.website

[@aleynaakkan4381]

Hello is it possible to add clickable button to the image? So that people can open the link?

[@framer.university]

Yes u can go to top right panel and click link.

[@allyamri]

When will be the Framer course ready?

[@framer.university]

Releasing in early August :)

[@stronglikebulll398]

tried signing up for the course but says theres only a waitlist??

[@framer.university]

Yes, the course hasn’t released yet. Stay tuned :)

[@josephmathenge5248]

Is it possible for the center animating image not to reduce quality as you scroll? Mine kills the quality badly

[@framer.university]

The only thing you can do is to make sure your image is HQ and don't scale too much.

[@henriux22]

That's the issue I have with it, it absolutely destroys the images and the res of it doesn't matter, tried 4k images

[@framer.university]

@@henriux22 make sure the images aren't bigger than 1mb.

[@henriux22]

How do I avoid horizontal scrolling using this? after those images move to the side the whole page expands

[@henriux22]

Never mind, fixed it, not sure if I missed something somewhere, but the solution was to add "Overflow X: Hidden and Overflow Y: Scroll" to the wrap element for the images.

[@framer.university]

Yes that’s a great solution! I usually just have an extra Frame that has overflow hidden around the elements that I move. This is needed because we set the overflow to visible on the main breakpoint because of the sticky positioning.

[@abhishekgharia8808]

Where can we grab the free course

[@framer.university]

framer.university sign up on the list. It launched in Aug, you’ll get notified.

[@VRTL_WRLD]

❤

[@framer.university]

🫶

[@franlee7028]

It would be even better if there were subtitles.

[@framer.university]

Fortunately, KZbin auto-generates captions for vids. Just wait a bit and it will be available for this vid as well.

[@mrmalik1085]

It's not free Free one does not allow any photo

[@framer.university]

What free?

[@mrmalik1085]

Framer

[@artisist]

sry but its really hard to follow since its super fast

[@framer.university]

Thanks for the feedback! Will do my best to make my videos easier to follow in the future

[@artisist]

@@framer.university ok, thanks. The speed of speech and also the movement on the screen was too fast.

[@abassmutala]

2 seconds in and I have subscribed🫡

[@framer.university]

awesome! welcome aboard :D

[@oussamajaafar5287]

Thank you for the another great video,,,

[@framer.university]

Yeey, thanks! ✨✨