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.
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 💙🫡
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!
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.
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 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
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. :)
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 :)
I use multi variants interactive Component for figma prototype interaction design. Can we do the same component based Interaction design using Components in framer?
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 :)
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 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 😥
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
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 Replaced ALL my ADOBE APPS with these [free or cheaper] Alternatives!](/img/n.gif)
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...
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✌
Finally the tutorial I need from Nandi. Thanks a bunch for teaching us about Framer
You are soo welcome
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 💙🫡
Couln't believe it I got this all information with free, thanks so much!
My pleasure mate! Happy to help :)
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
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!
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!
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.
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
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 :))
I just want to appreciate your work and consistency Nandi
thank u so much mate!
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 🫶🫶
At first I didn't understand, but the timeline trick is genius.
So glad to hear this mate 🫶
This is pure gold.
Appreciate it mate 🫡
Wow that's incredible. Such smart methods! Thank you!
Thank u do much mate 💙
thank you so much nandi, much needed tutorial
You are welcome :) glad u like it!
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. 🫶
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?
Fantastic content, I loved
Thank u so much :)
So clear explanation, thank you Nandi. 😄
So happy to hear this :) thanks for the feedback
Thank you so much man for this free tutorial!
Of course mate! 🙏🫶
This is so helpful thank you Nandi !
I'm so happy! :) Glad I could help
Nice tip man, thanks!
Happy to help 🫶
This is massive🔥🔥
Thank u so much 🫶
awesome!!.. definitely will wait for your next cool effect tutorials
Thank u so much :) stay tuned!
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.
@@framer.university Thank you so much, Nandi! Really helpful
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
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 🙏
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!
Thank you for this tutorials
Glad you like them! 💙
Add MPESA integration in framer. MPESA is paying platform in Kenya like scribe, lemon squeezy, paypal etc.
One of your fans 🙏
Love ya mate 🫶
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.
I can't thank you enough...
🫶🫶
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.
Awesome❤❤
🫶🫶
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? :)
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.
Awesome
Thank u so much mate 🫶
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. :)
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 :)
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, 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.
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 :)
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🙏
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?
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 😥
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?
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 💙