No video
Framer Tutorial: Advanced Scroll Zoom Animation
Рет қаралды 19,507
Күн бұрын🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to create an advanced scroll zoom animation in Framer. Follow along and I'll show you how sticky positioning works and how to get the most out of Framer to achieve advanced animations. After watching this video, you’ll have a cool scroll zoom animation on your website, without writing any code.
Remix the project: vrtl-zoom.learnframer.site/
Originally seen on: vrtlwrld.io
0:00 - Introduction
0:55 - Project setup
3:05 - Building the structure
10:38 - Adding zoom effects
17:20 - Animating the overlays
18:27 - Animating the images out
20:34 - Conclusion & additional resources
21:16 - Realizing that the course might not be released just yet
Follow me on:
Twitter: / learnframer
Instagram: / framer.university
@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. 🫶
@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. 🚀
@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.
@fotoflo 6 ай бұрын
exactly what i was looking for, thanks!
@framer.university 6 ай бұрын
Happy to hear I could help :)
@kimcruz3889 Жыл бұрын
thanks so much for thiiiisss!!! keep em coming! 🥳
@framer.university Жыл бұрын
Happy to help! :) More to come ✨✨
@praveensolanki8747 11 ай бұрын
Bro, you are doing great work. Thanks 😊
@framer.university 11 ай бұрын
It's my pleasure🙌🙌
@leemahlangu19 2 ай бұрын
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 22 күн бұрын
CFBR
@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 🫶
@allyamri Жыл бұрын
What a great tut!
@framer.university Жыл бұрын
Thank you so much! :)
@dukeselwood 5 ай бұрын
Really cool, thanks!
@framer.university 5 ай бұрын
Glad you liked it!
@nasimmahamud6304 Жыл бұрын
Thank you for the another great video,,,
@framer.university Жыл бұрын
My pleasure 😇
@des7638 6 ай бұрын
So damn Clever. thank you!
@framer.university 6 ай бұрын
Happy to help 🙌
@abayismailov5594 29 күн бұрын
good morning! can we change text information depend on image? for example we wanna news section make like this
@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. :)
@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
@hiteshsinghbisht3632 19 күн бұрын
but how did you got the zoom in effect in the first place?
@kreativethinker5987 2 ай бұрын
When will the course be released! Been waiting for ages :)
@framer.university 2 ай бұрын
Courses coming this year! Stay tuned and sorry for the delay. Wanna make sure I give out something exceptional.
@kreativethinker5987 2 ай бұрын
@@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 :)
@atomparish 11 ай бұрын
Two best tools to learn in design right now are Framer and Rive
@framer.university 11 ай бұрын
Totally agree!
@aleynaakkan4381 3 ай бұрын
Hello is it possible to add clickable button to the image? So that people can open the link?
@framer.university 3 ай бұрын
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 3 ай бұрын
tried signing up for the course but says theres only a waitlist??
@framer.university 3 ай бұрын
Yes, the course hasn’t released yet. Stay tuned :)
@henriux22 8 ай бұрын
How do I avoid horizontal scrolling using this? after those images move to the side the whole page expands
@henriux22 8 ай бұрын
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 8 ай бұрын
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.
@josephmathenge5248 10 ай бұрын
Is it possible for the center animating image not to reduce quality as you scroll? Mine kills the quality badly
@framer.university 10 ай бұрын
The only thing you can do is to make sure your image is HQ and don't scale too much.
@henriux22 8 ай бұрын
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 8 ай бұрын
@@henriux22 make sure the images aren't bigger than 1mb.
@VRTL_WRLD 11 ай бұрын
❤
@framer.university 11 ай бұрын
🫶
@franlee7028 Жыл бұрын
It would be even better if there were subtitles.
@framer.university Жыл бұрын
Fortunately, KZfaq auto-generates captions for vids. Just wait a bit and it will be available for this vid as well.
@artisist 9 ай бұрын
sry but its really hard to follow since its super fast
@framer.university 9 ай бұрын
Thanks for the feedback! Will do my best to make my videos easier to follow in the future
@artisist 9 ай бұрын
@@framer.university ok, thanks. The speed of speech and also the movement on the screen was too fast.
@mrmalik1085 6 ай бұрын
It's not free Free one does not allow any photo
@framer.university 6 ай бұрын
What free?
@mrmalik1085 6 ай бұрын
Framer
@oussamajaafar5287 Жыл бұрын
Thank you for the another great video,,,
@framer.university Жыл бұрын
Yeey, thanks! ✨✨
BalcevMMA_BOXING
Рет қаралды 14 МЛН