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 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
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!
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!
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 ❤
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.
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.
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.
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 🫶
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 😭
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
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 :)
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.
@@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
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.
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?
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?
@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 😢
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
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 :)
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.
Dude I think im fucking way to fried or something but what the hell Is being used to create the animations??? I can’t find any place that resembles where he is at in the video, also I think he says it but I think his accent makes it a little hard to understand… I’m such a NOOB I hate it
Animations are created with scroll transforms triggered with scroll sections. Recommend watching the video from start to finish and you’ll understand it:)
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✌
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...
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 :)
Finally the tutorial I need from Nandi. Thanks a bunch for teaching us about Framer
You are soo welcome
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
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
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:)
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 💙🫡
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 :)
That timeline rotation was huge brain moment ty king
soo happy to hear this 🫶🫶
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
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!
This video is very helpful. Thanks a lot, Nandi. You are awesome!
appreciate ya!
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 :)
GREAT EXPLANATION!!! 🔥 Really made it simple to grasp the concept, especially the timeline thing.
yay, glad it helped simplify things mate!
This is pure gold.
Appreciate it 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. 🫶
Couln't believe it I got this all information with free, thanks so much!
My pleasure mate! Happy to help :)
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?
thank you so much nandi, much needed tutorial
You are welcome :) glad u like it!
Thank you so much man for this free tutorial!
Of course mate! 🙏🫶
Wow that's incredible. Such smart methods! Thank you!
Thank u do much mate 💙
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!
Been smiling from the start till the end 🤭
Time to try it out!
great! excited to see what you build :)
Great presentation
Thank you!🙏
awesome!!.. definitely will wait for your next cool effect tutorials
Thank u so much :) stay tuned!
This is so helpful thank you Nandi !
I'm so happy! :) Glad I could help
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 🫶
Thanks man. Really helpful content.
My pleasure 🫡
I just want to appreciate your work and consistency Nandi
thank u so much mate!
So clear explanation, thank you Nandi. 😄
So happy to hear this :) thanks for the feedback
Thank you for the great Timeline Trick!!! Amazing
Glad u like it mate 🫡
Great Tutorial Nandi! Thank you very much..
Fantastic content, I loved
Thank u so much :)
awesome tutorial, great explantions. thanks alot!
Glad it was helpful 💙
This is massive🔥🔥
Thank u so much 🫶
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 :))
Thank you for this tutorials
Glad you like them! 💙
Thank you so much! This really helped me.
yay, happy to hear that! :))
We all love you Nandi :3
Ahh thank uu 🫶🫶
Nice tip man, thanks!
Happy to help 🫶
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!
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.
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
Thanks for yout tutorial
Awesome….more of these videos pls
more on the way 🫡
großartig, great and very well explained; thank you very much
so glad you liked it!
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.
At first I didn't understand, but the timeline trick is genius.
So glad to hear this mate 🫶
One of your fans 🙏
Love ya mate 🫶
man that's really cool
happy to hear that mate!
this is so underrated
glad you liked it! :)
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.
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.
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
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? :)
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.
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
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
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.
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 😥
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.
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.
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.
it's amazing!
💙
can we add motion blur type effect on that?
not really. :/
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.
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 🙏
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. :)
what software do you use to create animations?
Framer.
@@framer.universityno I meant the one in your Browser
Awesome
Thank u so much mate 🫶
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.
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:)
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 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?
Add MPESA integration in framer. MPESA is paying platform in Kenya like scribe, lemon squeezy, paypal etc.
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 😢
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 is jitter. is it a different software?
yes it is! it's a super easy-to-use animation tool. check it at jitter.video/
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🙏
I can't thank you enough...
🫶🫶
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?
it just start wierd. every framer i put in a relative container will be absolute. and i cant change it
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 :)
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.
Dude I think im fucking way to fried or something but what the hell
Is being used to create the animations??? I can’t find any place that resembles where he is at in the video, also I think he says it but I think his accent makes it a little hard to understand… I’m such a NOOB I hate it
Animations are created with scroll transforms triggered with scroll sections.
Recommend watching the video from start to finish and you’ll understand it:)
:)
💙
Fantastic, thank you.
Appreciate your comment mate 💙
24:05
WHAT??!! How does that work 🤔😲😯