First of all, you are truly an excellent teacher, and you explain the logic of the subject very well. Thank you for your efforts and all this quality contents.
This tutorial is so good and thorough! Can I just say that even if you already have all these courses available for free, I would not think twice about purchasing any additional courses from you. You deserve it!
This timeline trick, you're such a good teacher man! I'm just starting Framer and already learned so much thanks to you 🙏 Thanks for sharing all your your knowledge to us!
This video is a much watch and practice. If you aspire to becoming the best in Framer you need to follow Nandi, his knowledge and professionalism is off the chart. I remixed this exercise spent an hour completing the tasks and it all made sense. 👏👏👏👏👏 10/10
This Video is amazing, I can say now that I understand how a animation really works, and what´s behind it, not just watch a tutorial and copy everything mindlessly from a video. Thanks Nandy!
Using dedicated, tagged scroll sections with differing heights is brilliant. Exactly the type of technique I was looking for to better control scroll transforms. Thanks you for sharing!
Great tutorial, easy to understand and beautifully explained, I appreciate so much what you do for the community and for free, no gatekeeping. Absolutely fabulous. You're the best I appreciate you so much.
happy to hear this mate! worked a lot with this one, to figure out a way to convey this the best way possible. these vids could easily be in paid courses 🤫 but I'm sharing them for free anyways. comments like yours keep me going 💙🫡
Nandy, really thank you so much for this tutorial. Even if I had understood the logic of the scroll sections, this trick gives us fully controll to the animation, you are craftman and great teacher!
For those that want the final result of the transition to stay a bit longer in the screen, like at Tedy: wrap the timeline in a new stack (=, align: top, height: 1100).
Thanks for the advice mate! You can also add a simple "spacer" frame after timeline frame within the animation frame. So you'd have sticky, timeline, and spacer frames right below each other.
Man I never ever comment on videos but Nandi you made some amazing videos and the effort you've put is commendable sire! Also it adds a lot of value to a designer like me. Thank you and please don't stop ❤
Awesome tutorial. You thought about every detail. Voice sounds gentle and it is easy to hear everything you say. I did all the things you mentioned, and it worked:) But I heard word "Basically" over 30 times in this video, it is hard to ignore when it pops up so often. Anyway, thank you for your work ❤
Happy to hear this:) Yes, when I edit the video, I also usually get really annoyed hearing myself repeat some phrases over and over again. Really have to improve that!
Awesome video Nandi! Big fan of your work. Framer University is the #1 place I go for inspiration and to steal something like an artist. Can I ask something. I have made a custom course platform with Framer, but I want to gamify it a bit. How can I track what users have watched to unlock certain bonuses? Something like Skool does it, you have to watch and engage with content to level up and unlock next content.
Hey Erik! Glad u enjoy Framer Uni! :) To add additional functionality like that to your course platform, you’ll need heavy custom code and custom backend unfortunately.
Extremely helpful! Thank you so much! Could you also make a tutorial for horizontal scroll with sticky? When I set overflow to visible, I get extra horizontal space on the canvas.
Thank u so much! Glad it was helpful. Good idea for another tutorial. Until then, check this resource: framer.university/resources/2-types-of-horizontal-scrolling-effect-in-framer The first type showcased uses sticky positioning and it also has a mini tutorial attached.
hey, thank you for the tutorial - tried it yestarday and it was awesome :D Just one quastion - where can I learn more about how to create the timeline by myself?
Thank you so much! You can copy the timeline from the remix to any of your projects and plan it the way I planned in this video. Is there anything specific you have a hard time understanding? Let me know and I’ll make sure to get it clear in a future video 🫶
This is great!!❤ I would really love if you can do a book opening animation with the 3D transform on scroll!! I have been trying this since 3d transform feature is launched. Would really appreciate your help
Of course you can! I’ll make something like that! Until then u might wanna check out this 3D book anim on scroll: framer.university/resources/3d-bookshelf-scroll-animation-in-framer
You don't have to create it. It's already set up in the file that you can remix. Just copy it from there, or see how it's set up in the remix and recreate it for yourself.
I followed the steps but in the mobile version it extends a little bit in width and a scroll bar is appearing at the bottom can you give the solution 😭
Great concept and beautifully explained! Although I was trying to achieve an effect where a frame grows along the y-axis on scroll to give an effect of a rising bar graph on scroll. But framer doesn't allow scaling along specific axis. Any suggestions for a workaround?
Yeah unfortunately framer doesn’t allow scaling separately on different axes. :/ A code override might help but haven’t experimented with this exact thing.
@@framer.university Not at the moment, I'm actually searching for public API endpoints in order to see the full potential of the fetch api integration! Wish they made a backend API conection 😥
amazing tutorial, much need one, I am having a issue with the smaller screens, like phones, when I am scrolling, images are going out of frame and since it is on visible the web structure shrinks down to show the images outside frame. could you please share the solution? thank you
Can you please advise how can I make this a component so that I can reuse it? I can make it work following your tutorial, but can't make it work as a component. How do I set up the scroll sections so it can be a reusable component? Please help. If this is not possible please let me know. Thank you. I look forward to your reply. I love your videos.
Unfortunately you can't turn the whole thing into a component, to make it reusable, since the timeline with it's scroll sections can't be in a component. Technically you can still turn the sticky frame into a component if that helps you. :)
I use multi variants interactive Component for figma prototype interaction design. Can we do the same component based Interaction design using Components in framer?
How do you keep the images in view, specifically regarding height? Even with the remix link, the images end up getting cut off on scroll. I'm definitely having it scroll away before I've seen the full effect. (using your remix - so it must be my laptop screen size?) How can I fix that?
ah yes, sorry it's because of the screen size. i have a bigger monitor and haven't noticed it. you can easily fix it by going to the "sticky" frame and changing its overflow to "visible". so now the overflowing image parts will be visible in case they get cut off. you can also adjust the scroll transform effect on those images so they don't get transformed too far off from the center. lmk if this helped :)
Hey Nandi, my content isn't sticked to the page even after following just like u, i just duplicated ur content with my own touch but on scroll the sticky framer doesnt stick to top instead scrolls along the page how do i clear it out?
i figured it out, to the viewers : if ur stucked with same problem then set ur parent frame right from desktop to sticky frame all to visible this enable sticky positioning when u scroll
This is great but how can I make this a component so that I can reuse it? I can make it work following your tutorial, but can’t make it work as a component. How do I set up the scroll sections so it can be a reusable component? Please help
You need trigger frames and scroll sections. Showing it like a timeline was just my way of making it easier to understand. ✌️ Which part of that confused you?
Bro I have a issue when I made my website, like when I make it in laptop it would be perfect but when I look it in a bigger display the sides of my website would have white bordes😢.How to overcome this issue?
Make sure you use relative sizing options like “fill” for width. You see me in videos setting fill width on almost all frames to make sure they’re adopting to the website’s width change. What’s probably happening for you is that you have fixed width on your frame, and when the site gets a little wider, it doesn’t grow with it and reveals white bars on the sides (which is basically the background). Hope this helps :)
@framer.university i have even changed from Page settings, when my page is searched on Google it says framer website , but it's on custom domain . I am very confused and I need help 😢
My attention span is probably shit during the week, I feel like I just watched 5min of introductions it could have been said in 3 seconds. I really tried, but not only I find this not clear at all but it's too slow. Im sure it works for others but I literally fell asleep.
First of all, you are truly an excellent teacher, and you explain the logic of the subject very well. Thank you for your efforts and all this quality contents.
Thank u so much man! These comments keep me going
@@framer.university You're welcome. Your contributions are very valuable. All the best✌
This tutorial is so good and thorough! Can I just say that even if you already have all these courses available for free, I would not think twice about purchasing any additional courses from you. You deserve it!
Thank u so much 🫶
I’m planning to make the courses even better. :)
I hope you’ll like them 👀
@@framer.university yey! already subscribed to your waitlist a few days back! 😋
This timeline trick, you're such a good teacher man! I'm just starting Framer and already learned so much thanks to you 🙏 Thanks for sharing all your your knowledge to us!
always happy to share mate! 🙌
This video is a much watch and practice. If you aspire to becoming the best in Framer you need to follow Nandi, his knowledge and professionalism is off the chart. I remixed this exercise spent an hour completing the tasks and it all made sense.
👏👏👏👏👏 10/10
thank you mate! really appreciate it :)
The timeline trick is so smart 🤯
Hehe thanks man! Was thinking how could I make scroll anims with scroll sections easier to understand for beginners.
So I’m happy u liked it 🫶
exactly...
One of the best teacher you are, Brilliantly explained.
thank you mate!
Finally the tutorial I need from Nandi. Thanks a bunch for teaching us about Framer
You are soo welcome
This Video is amazing, I can say now that I understand how a animation really works, and what´s behind it, not just watch a tutorial and copy everything mindlessly from a video. Thanks Nandy!
love that you’re diving deeper and not just copying - keep it up! happy to help 🙌
Using dedicated, tagged scroll sections with differing heights is brilliant. Exactly the type of technique I was looking for to better control scroll transforms. Thanks you for sharing!
happy it helped! cant't wait to see how you use it in your projects 🙌
I like the way you teach thank you! Framer used to be confusing but you made it logical hence easy to understand 👏🏽👏🏽👏🏽
so happy to hear that!
Azta!!! Köszi Nándi! Your teaching and explanation skills are unmatched! This is such a complex process and you broke it down so well!
Ahh de jó ezt hallani! 😭
I remember I worked my ass off with this video haha. Great to hear it was worth it:)
Absolute perfection, Nandi! Thank you! Soooo appreciate your ability to teach so well and desire to make these videos for all of us. This was genius
Receiving messages like this makes it all worth it.
Thank u so much for the support
The timeline visual made it click for me :)
God bless the hard work that you do
So happy to hear this :) was thinking a lot about how could i make it easier to comprehend
Great tutorial, easy to understand and beautifully explained, I appreciate so much what you do for the community and for free, no gatekeeping. Absolutely fabulous. You're the best I appreciate you so much.
happy to hear this mate! worked a lot with this one, to figure out a way to convey this the best way possible.
these vids could easily be in paid courses 🤫 but I'm sharing them for free anyways.
comments like yours keep me going 💙🫡
Nandy, really thank you so much for this tutorial. Even if I had understood the logic of the scroll sections, this trick gives us fully controll to the animation, you are craftman and great teacher!
ah Samuel, appreciate it so much! you're making my day with these nice comments
For those that want the final result of the transition to stay a bit longer in the screen, like at Tedy: wrap the timeline in a new stack (=, align: top, height: 1100).
Thanks for the advice mate!
You can also add a simple "spacer" frame after timeline frame within the animation frame. So you'd have sticky, timeline, and spacer frames right below each other.
Super smart to have a vertical timeline to better picture the way animations should work 👌
Once you see it you can’t unsee
Honestly spectacular work !! You are getting better and better at what you do Nandi! Gj!
Thank you so much!! Im trying :)
Man I never ever comment on videos but Nandi you made some amazing videos and the effort you've put is commendable sire! Also it adds a lot of value to a designer like me. Thank you and please don't stop ❤
I really appreciate u making this comment! These keep me going. Much love 🫶
This is some big brain stuff bro... Crazy crazy
hope it helped hehe :))
Awesome tutorial. You thought about every detail. Voice sounds gentle and it is easy to hear everything you say. I did all the things you mentioned, and it worked:)
But I heard word "Basically" over 30 times in this video, it is hard to ignore when it pops up so often. Anyway, thank you for your work ❤
Happy to hear this:)
Yes, when I edit the video, I also usually get really annoyed hearing myself repeat some phrases over and over again.
Really have to improve that!
That timeline rotation was huge brain moment ty king
soo happy to hear this 🫶🫶
Yes! Scroll animations have been a bit of a mystery for me so this will be perfect for me to reference. I know what I'm playing with this weekend 😎
Love to hear it mate! Have fun this weekend, and let me know if i can help :)
Just what I needed to complete my portfolio. Let me relax and learn ❤ Thanks
You got this! Make sure to send in the result 🫶 Enjoy learning!
GREAT EXPLANATION!!! 🔥 Really made it simple to grasp the concept, especially the timeline thing.
yay, glad it helped simplify things mate!
omg you’re awesome with that technique ❤
thank you mate!
Very helpful tutorial! Thank you so much. I appreciate your work and have learned a lot from your valuable content!
Thank you so much for support! I see u in the comments a lot. 🫶
The Great Nandi Wizard does it AGAIN!
🙏🙏
This video is very helpful. Thanks a lot, Nandi. You are awesome!
appreciate ya!
5 mins into the video !!, 10 mins now !!!!, 15 mins (just timestamps to motivate me ) done thanks for the video Nandi
Hope it was worth a watch :))
Couln't believe it I got this all information with free, thanks so much!
My pleasure mate! Happy to help :)
Wow that's incredible. Such smart methods! Thank you!
Thank u do much mate 💙
Been smiling from the start till the end 🤭
Time to try it out!
great! excited to see what you build :)
Thank you so much man for this free tutorial!
Of course mate! 🙏🫶
awesome!!.. definitely will wait for your next cool effect tutorials
Thank u so much :) stay tuned!
thank you so much nandi, much needed tutorial
You are welcome :) glad u like it!
Nice tut, now I can understand the principles much better.
Im so glad 🫶
@@framer.university do you have a discord community? or can I find you?
Great Tutorial Nandi! Thank you very much..
happy to help:)
This is pure gold.
Appreciate it mate 🫡
So clear explanation, thank you Nandi. 😄
So happy to hear this :) thanks for the feedback
I just want to appreciate your work and consistency Nandi
thank u so much mate!
Thanks man. Really helpful content.
My pleasure 🫡
This is so helpful thank you Nandi !
I'm so happy! :) Glad I could help
awesome tutorial, great explantions. thanks alot!
Glad it was helpful 💙
Thank you for the great Timeline Trick!!! Amazing
Glad u like it mate 🫡
excelent video! cheers from Ecuador
glad you liked it! cheers from Hungary :)
Thank you so much! This really helped me.
yay, happy to hear that! :))
Fantastic content, I loved
Thank u so much :)
Awesome video Nandi! Big fan of your work.
Framer University is the #1 place I go for inspiration and to steal something like an artist.
Can I ask something.
I have made a custom course platform with Framer, but I want to gamify it a bit.
How can I track what users have watched to unlock certain bonuses?
Something like Skool does it, you have to watch and engage with content to level up and unlock next content.
Hey Erik!
Glad u enjoy Framer Uni! :)
To add additional functionality like that to your course platform, you’ll need heavy custom code and custom backend unfortunately.
großartig, great and very well explained; thank you very much
so glad you liked it!
Great presentation
Thank you!🙏
We all love you Nandi :3
Ahh thank uu 🫶🫶
Awesome….more of these videos pls
more on the way 🫡
This is massive🔥🔥
Thank u so much 🫶
Thank you for this tutorials
Glad you like them! 💙
Nice tip man, thanks!
Happy to help 🫶
At first I didn't understand, but the timeline trick is genius.
So glad to hear this mate 🫶
Nandi, you’ve completely nailed it! It’s the best when you show us freakin methods like the one with the rotated timeline 🫨 love this content ❤
Thank u so much man! My mission is to take complex things and teach them in a simple way so anyone can understand 🙏
this is so underrated
glad you liked it! :)
Thanks for yout tutorial
Extremely helpful! Thank you so much!
Could you also make a tutorial for horizontal scroll with sticky? When I set overflow to visible, I get extra horizontal space on the canvas.
Thank u so much! Glad it was helpful.
Good idea for another tutorial. Until then, check this resource:
framer.university/resources/2-types-of-horizontal-scrolling-effect-in-framer
The first type showcased uses sticky positioning and it also has a mini tutorial attached.
@@framer.university Thank you so much, Nandi! Really helpful
Very cool trick! I always wondered how this was done. Now I'm curious about how it could be done with regular HTML and CSS 🤔
Same way.
One of your fans 🙏
Love ya mate 🫶
hey, thank you for the tutorial - tried it yestarday and it was awesome :D Just one quastion - where can I learn more about how to create the timeline by myself?
Thank you so much!
You can copy the timeline from the remix to any of your projects and plan it the way I planned in this video.
Is there anything specific you have a hard time understanding? Let me know and I’ll make sure to get it clear in a future video 🫶
@@framer.university thank you! I just would like to understand from scratch, if I plan another scroll animation, how I could set up a timeline
Fantastic video! Just got into Framer and it’s a blast. Do you have any eta for your Framer University course on your website? 😊
Thank u so much! 🫶
No eta yet, but stay tuned, theyre coming this year!
man that's really cool
happy to hear that mate!
Awesome❤❤
🫶🫶
This is great!!❤ I would really love if you can do a book opening animation with the 3D transform on scroll!! I have been trying this since 3d transform feature is launched. Would really appreciate your help
Of course you can! I’ll make something like that!
Until then u might wanna check out this 3D book anim on scroll:
framer.university/resources/3d-bookshelf-scroll-animation-in-framer
Nandi, thank you so much for the video! I am trying to look for the 'animation block' section on the right panel. Could you tell me where to find it?
Glad it helped! :)
You can find it on the left “pages” panel. Just click the /timeline page. You can copy from there.
Thank you for your content,
could you take a bit about the API with framer just launched
Yes I’m planning to make a video about it it. Is there anything specific u wanna know? :)
it's amazing!
💙
Great video. But How to create that Timeline block?
You don't have to create it. It's already set up in the file that you can remix. Just copy it from there, or see how it's set up in the remix and recreate it for yourself.
I can't thank you enough...
🫶🫶
I followed the steps but in the mobile version it extends a little bit in width and a scroll bar is appearing at the bottom can you give the solution 😭
the frame that you set to "sticky" should have overflow "hidden". that will fix it.
Great concept and beautifully explained! Although I was trying to achieve an effect where a frame grows along the y-axis on scroll to give an effect of a rising bar graph on scroll. But framer doesn't allow scaling along specific axis. Any suggestions for a workaround?
Yeah unfortunately framer doesn’t allow scaling separately on different axes. :/
A code override might help but haven’t experimented with this exact thing.
Thanks for the video. I have an issue, when I drew the Hero frame, it does not stay on top but dropping to the middle.
Parent frame layout settings on the right panel: direction vertical, distribute start.
Nice video Nandi! Have you played a bit with the API integration framer just launched?
thank you so much! :)
yes I'm playing with fetch! I might drop a video on it. Is there anything u wanna know? 🙌 lmk!
@@framer.university Not at the moment, I'm actually searching for public API endpoints in order to see the full potential of the fetch api integration! Wish they made a backend API conection 😥
Hi, what do you use for the component of the timeline please ?
You can find it in the remix! Link in the description. Lmk if u got it.
Add MPESA integration in framer. MPESA is paying platform in Kenya like scribe, lemon squeezy, paypal etc.
amazing tutorial, much need one,
I am having a issue with the smaller screens, like phones, when I am scrolling, images are going out of frame and since it is on visible the web structure shrinks down to show the images outside frame. could you please share the solution? thank you
Thank u :)
It shouldnt happen if the sticky frame has overflow set to hidden.
Can you please advise how can I make this a component so that I can reuse it? I can make it work following your tutorial, but can't make it work as a component. How do I set up the scroll sections so it can be a reusable component? Please help. If this is not possible please let me know. Thank you. I look forward to your reply. I love your videos.
Unfortunately you can't turn the whole thing into a component, to make it reusable, since the timeline with it's scroll sections can't be in a component.
Technically you can still turn the sticky frame into a component if that helps you. :)
Awesome
Thank u so much mate 🫶
I use multi variants interactive Component for figma prototype interaction design.
Can we do the same component based Interaction design using Components in framer?
Most probably yes!
@@framer.university I wish you do deep explore framer Components & help us learn more about interactive Components in framer.
can we add motion blur type effect on that?
not really. :/
How can we lock the scroll animation once it expands so when we scroll up it dose not collapse again?
Not really possible with scroll transforms.
How do you keep the images in view, specifically regarding height? Even with the remix link, the images end up getting cut off on scroll. I'm definitely having it scroll away before I've seen the full effect. (using your remix - so it must be my laptop screen size?) How can I fix that?
ah yes, sorry it's because of the screen size. i have a bigger monitor and haven't noticed it.
you can easily fix it by going to the "sticky" frame and changing its overflow to "visible". so now the overflowing image parts will be visible in case they get cut off.
you can also adjust the scroll transform effect on those images so they don't get transformed too far off from the center.
lmk if this helped :)
Thanks for pointing out that issue
Hey Nandi, my content isn't sticked to the page even after following just like u, i just duplicated ur content with my own touch but on scroll the sticky framer doesnt stick to top instead scrolls along the page
how do i clear it out?
i figured it out, to the viewers : if ur stucked with same problem then set ur parent frame right from desktop to sticky frame all to visible
this enable sticky positioning when u scroll
hey! as mentioned in the video at 4:55, all parent frames of the sticky positioned frame should be set to overflow visible.
what software do you use to create animations?
Framer.
@@framer.universityno I meant the one in your Browser
In the 14th minute, 7, what is the name of the moving software, I want to use it
As mentioned in the video, it’s Jitter:)
This is great but how can I make this a component so that I can reuse it? I can make it work following your tutorial, but can’t make it work as a component. How do I set up the scroll sections so it can be a reusable component? Please help
👆 is this possible?
what is jitter. is it a different software?
yes it is! it's a super easy-to-use animation tool. check it at jitter.video/
Can it be done without the timeline thing? Is confused me
You need trigger frames and scroll sections.
Showing it like a timeline was just my way of making it easier to understand. ✌️
Which part of that confused you?
hi I did all the steps but the sticky option on the right is not still clickable, please help, I don't know what to do
Parent is a stack?
@@framer.university I just did that, thanks, it works now🙏
Bro I have a issue when I made my website, like when I make it in laptop it would be perfect but when I look it in a bigger display the sides of my website would have white bordes😢.How to overcome this issue?
Make sure you use relative sizing options like “fill” for width.
You see me in videos setting fill width on almost all frames to make sure they’re adopting to the website’s width change.
What’s probably happening for you is that you have fixed width on your frame, and when the site gets a little wider, it doesn’t grow with it and reveals white bars on the sides (which is basically the background).
Hope this helps :)
I publish my site with a custom domain and it still shows up build with framer . How to remove that
wait a couple of hours and republish your site. it should be all good!
@framer.university i have even changed from Page settings, when my page is searched on Google it says framer website , but it's on custom domain . I am very confused and I need help 😢
so this is the secret sauce... wow
Yep 🤫
it just start wierd. every framer i put in a relative container will be absolute. and i cant change it
well
My attention span is probably shit during the week, I feel like I just watched 5min of introductions it could have been said in 3 seconds. I really tried, but not only I find this not clear at all but it's too slow. Im sure it works for others but I literally fell asleep.
I’m always trying to improve my content.
But yea, you also might need a digital detox or something to get that attention span back:)
@@framer.university That"s for sure bro.
:)
💙