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
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.
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 ❤
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.
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!
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 💙🫡
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
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.
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.
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.
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 :)
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
@@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 😥
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?
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?
@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 😢
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.
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 :)
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...
Finally the tutorial I need from Nandi. Thanks a bunch for teaching us about Framer
You are soo welcome
That timeline rotation was huge brain moment ty king
soo happy to hear this 🫶🫶
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
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 🫶
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:)
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
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
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 :)
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.
GREAT EXPLANATION!!! 🔥 Really made it simple to grasp the concept, especially the timeline thing.
yay, glad it helped simplify things 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!
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 💙🫡
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!
Been smiling from the start till the end 🤭
Time to try it out!
great! excited to see what you build :)
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 :)
Honestly spectacular work !! You are getting better and better at what you do Nandi! Gj!
Thank you so much!! Im trying :)
We all love you Nandi :3
Ahh thank uu 🫶🫶
This is pure gold.
Appreciate it mate 🫡
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?
Wow that's incredible. Such smart methods! Thank you!
Thank u do much 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. 🫶
awesome!!.. definitely will wait for your next cool effect tutorials
Thank u so much :) stay tuned!
I just want to appreciate your work and consistency Nandi
thank u so much mate!
thank you so much nandi, much needed tutorial
You are welcome :) glad u like it!
So clear explanation, thank you Nandi. 😄
So happy to hear this :) thanks for the feedback
Great Tutorial Nandi! Thank you very much..
Thank you so much man for this free tutorial!
Of course mate! 🙏🫶
Great presentation
Thank you!🙏
This is so helpful thank you Nandi !
I'm so happy! :) Glad I could help
Thank you for the great Timeline Trick!!! Amazing
Glad u like it mate 🫡
At first I didn't understand, but the timeline trick is genius.
So glad to hear this mate 🫶
awesome tutorial, great explantions. thanks alot!
Glad it was helpful 💙
Thanks man. Really helpful content.
My pleasure 🫡
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
Fantastic content, I loved
Thank u so much :)
Thanks for yout tutorial
Nice tip man, thanks!
Happy to help 🫶
Thank you for this tutorials
Glad you like them! 💙
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!
One of your fans 🙏
Love ya mate 🫶
This is massive🔥🔥
Thank u so much 🫶
man that's really cool
happy to hear that 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
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
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? :)
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.
it's amazing!
💙
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.
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.
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
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.
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 😥
Awesome❤❤
🫶🫶
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. :)
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.
Add MPESA integration in framer. MPESA is paying platform in Kenya like scribe, lemon squeezy, paypal etc.
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.
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.
Awesome
Thank u so much mate 🫶
can we add motion blur type effect on that?
not really. :/
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?
I can't thank you enough...
🫶🫶
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?
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 😢
it just start wierd. every framer i put in a relative container will be absolute. and i cant change it
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:)
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 :)
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.
:)
💙
Fantastic, thank you.
Appreciate your comment mate 💙
24:05
WHAT??!! How does that work 🤔😲😯