@@framer.university thanks for your reply! I think the previous video is great for the text based effect, but what if you wanted to add a video or a logo instead? For instance, TH-cam on mobile now has an animation that plays quickly before the app opens. It could be that Framer isn’t the correct program to create the animated preloader I’m thinking of, but would want to know how I could include it into framer using best practices
Really nice to have this under the belt and will apply to my projects. One thing worth mentioning, l found that you had to name the Scroll Section "Start" for the first section and name the last section "end" for it work work. I tried other names but didn't work. Maybe because of the Code Overrides.
Hi Nandi, I tried applying this code for a vertical scroll where the glow (in my case its a solid circle) goes from top to bottom. However, it didn't work. Do you have any updated code for such a scenario?
Set a scroll transform on the frame, animate Y offset or opacity. Trigger with scroll section. Create a trigger frame for the end that you can assign a scroll section which will trigger this disappear effect.
Hi, thank you for the tutorial! I successfully created the progress bar. However, the bar extension lags a lot as I scroll down, not as smooth as in your example. Could you please explain why this might be happening? Thank you!
I was having the same issue, but kind fix it but change the values in the line 56, you will find this "width 0.5s ease-in-out" ... I changed '0.5s' to '0.1s' and it's smoother. Maybe try that
Hey great video! I will add this effect to my Home page. 😊 I got a question: "Can I represent your videos on my page?" I would like to show and inspire people, what we can do with framer. kind regards Fabi
Hey! Thank you for the tutorial! I was able to do it in my homepage, but when I tried to replicate in a different page, it doesnt work well, I think it doesnt recognize the end of the page... And I already review the tutorial a million times and can't find the error... Any tips? Thanks
Will it work in a circular progress. I want to create an upwards arrow on right bottom to go up and wrap a circular page progress around that icon in a border
@@framer.university to have a progress bar, for different catogories, not a scroll progress bar, but a progress bar, that shows different % for each catogory for example. That would be animated. I seem not to find an example to do this in framer. Might be missing something?
I'm not sure why, but what I accidentally discovered was when I used this component override on a CMS page the "line" layer had to be set to 100% for it to work properly. If you set it to 1%, it seems to understand it as being the end state being 1%.
I am facing a small doubt in the text colour animation code component. When I am changing the font family and publishing it then the font changes to times roman but in framer preview I can see the font I chose. So can you help me on how to fix that Thank you
@@framer.university oh sorry about that, I learn it already. Can you make video on horizontal scroll please? Not the slide/PowerPoint type. But actual horizontal scroll. There are few tutorials on TH-cam but they don't really work well when changing resolution, like first card moves even before the slide is in view. Sometimes there is horizontal scroll bar etc.
@@framer.university I'm making a roadmap journey and want to make a vertical progress bar on my content section, I saw other tutorials, In Scroll Speed I can not change the position to Scroll, the function does not appear. Is this because of an update? Can you maybe make a new tutorial for this situation. Vertical Scroll Progress Bar
How to put this in a frame and it will be overflow hidden. Lets say I have a frame and I want this to stay in max 800 width and if it reaches 800 width it will be overflow hidden and stay there. Could you show this or explain?
The idea is, the purple frame start growing from 0 to the end of the parent frame and the man in front (runner) will move with the purple frame. So when I scroll, it will have an effect like the runner is running back and forward. @@framer.university
your the best, don't stop making these videos. We love them
Super happy to hear this :) i’ll keep posting
This is a nice yet simple detail!
Please make more content on adding preloaders (animated logos, videos, etc)!
Thank you!
The previous tutorial on preloaders did not give you the knowledge you need?
What’s missing?
@@framer.university thanks for your reply! I think the previous video is great for the text based effect, but what if you wanted to add a video or a logo instead? For instance, TH-cam on mobile now has an animation that plays quickly before the app opens. It could be that Framer isn’t the correct program to create the animated preloader I’m thinking of, but would want to know how I could include it into framer using best practices
Really nice to have this under the belt and will apply to my projects. One thing worth mentioning, l found that you had to name the Scroll Section "Start" for the first section and name the last section "end" for it work work. I tried other names but didn't work. Maybe because of the Code Overrides.
I’m glad you found this helpful.
Yes you need to name them exactly start and end :)
Awesome Tutorial
Thank you!
Thank you a lot for your work
My pleasure!
How do I make the right side of the bar follow the cursor x-position instead of the scroll? I've been trying for some time but I can't make it work
Hi Nandi, I tried applying this code for a vertical scroll where the glow (in my case its a solid circle) goes from top to bottom. However, it didn't work. Do you have any updated code for such a scenario?
This is so cool. I tried adding it to my portfolio but it doesn't reach to the #end of where I want it to be. Any tips on how to do so?
you sure you followed every step exactly in the video?
@@framer.university I restarted all over again and cleaned up my stacks and now it looks good. Thank you for replying!
thank you
🙌
How can you make the progressbar dissappear after you've reached the end, as shown in the example??
Set a scroll transform on the frame, animate Y offset or opacity. Trigger with scroll section.
Create a trigger frame for the end that you can assign a scroll section which will trigger this disappear effect.
Thank you so much shafran here 👋
Thanks a lot Shafran for all the support 🫶
very nice! But is it possible to add the Spring motion? Than it would feel much smoother
You can edit the transition in this line:
transition: isScrolling ? "none" : "width 0.5s ease-in-out",
8:15 I have a question. How to hide the scroll bar in the section end like in video? Thanks you so heplful tutorial!
It is a MacOS setting.
Appearance > Show scroll bars > Automatically based on mouse or trackpad
Hi, thank you for the tutorial! I successfully created the progress bar. However, the bar extension lags a lot as I scroll down, not as smooth as in your example. Could you please explain why this might be happening? Thank you!
Hey!
I’d need to see your project to be able to tell.
Can u send a remix perhaps?
I was having the same issue, but kind fix it but change the values in the line 56, you will find this "width 0.5s ease-in-out" ... I changed '0.5s' to '0.1s' and it's smoother. Maybe try that
Hey great video!
I will add this effect to my Home page. 😊
I got a question: "Can I represent your videos on my page?"
I would like to show and inspire people, what we can do with framer.
kind regards Fabi
Hey of course you can share my videos if you clearly state that it is from Framer University
Hey! Thank you for the tutorial! I was able to do it in my homepage, but when I tried to replicate in a different page, it doesnt work well, I think it doesnt recognize the end of the page... And I already review the tutorial a million times and can't find the error... Any tips? Thanks
same issue happens to me
Will it work in a circular progress. I want to create an upwards arrow on right bottom to go up and wrap a circular page progress around that icon in a border
How to make the same thing but in a circle stroke?
Great video! How could this be done to create a progress bars.. from 0% to 100% with animation?
How that would be different from this?
@@framer.university to have a progress bar, for different catogories, not a scroll progress bar, but a progress bar, that shows different % for each catogory for example. That would be animated. I seem not to find an example to do this in framer. Might be missing something?
This sort of scroll animation can even be done vertically, right?
I'm not sure why, but what I accidentally discovered was when I used this component override on a CMS page the "line" layer had to be set to 100% for it to work properly. If you set it to 1%, it seems to understand it as being the end state being 1%.
How do I add a Load More button to the product page?
I’d use component variants for that. One variant has 3 items and then another variant has all items and then you connect the two with an interaction.
I am facing a small doubt in the text colour animation code component. When I am changing the font family and publishing it then the font changes to times roman but in framer preview I can see the font I chose. So can you help me on how to fix that
Thank you
Make sure the font is in use within the website somewhere.
amazing
Thanks a lot :)
great video. Appericate u
Thank you so much 🙏
Doesn't work for vertical scroll
Please a video on actual scroll bar
what do you want to learn (more specifically)?
@@framer.university oh sorry about that, I learn it already. Can you make video on horizontal scroll please? Not the slide/PowerPoint type. But actual horizontal scroll. There are few tutorials on TH-cam but they don't really work well when changing resolution, like first card moves even before the slide is in view. Sometimes there is horizontal scroll bar etc.
@@ForSocials check this: framer.university/resources/2-types-of-horizontal-scrolling-effect-in-framer
Doesn't work :(
lmk the issue and I’ll try to help! 🙌
@@framer.university I'm making a roadmap journey and want to make a vertical progress bar on my content section, I saw other tutorials, In Scroll Speed I can not change the position to Scroll, the function does not appear. Is this because of an update? Can you maybe make a new tutorial for this situation. Vertical Scroll Progress Bar
How to put this in a frame and it will be overflow hidden. Lets say I have a frame and I want this to stay in max 800 width and if it reaches 800 width it will be overflow hidden and stay there. Could you show this or explain?
Do u have an example of the behavior you’re trying to achieve?
The idea is, the purple frame start growing from 0 to the end of the parent frame and the man in front (runner) will move with the purple frame. So when I scroll, it will have an effect like the runner is running back and forward. @@framer.university
@@framer.university did you check