No video
Framer Tutorial: Adding Smooth Scroll To Your Website
🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to add smooth scroll effect to your Framer website.
Project remix: framer.university/resources/s...
0:00 - Introduction
0:28 - What is smooth scroll
1:10 - Open your Framer project
1:35 - Finding the resource on Framer University
1:57 - Paste the component in Framer
2:32 - Changing the intensity
3:10 - Adding the effect to more pages
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
Пікірлер: 99
Super helpful! Exactly what I've been looking for. Thank you!!
@framer.university
Ай бұрын
I’m glad this helped :))
This is great! Love your videos!
@framer.university
2 ай бұрын
Thanks so much!
I have been trying so hard to add this mometum scroll into my framer website by adding codes. I gave up on adding it and to my surprise this video dropped. Thanks a lot brother!!
@framer.university
6 ай бұрын
I am glad this helped u 🫶
Wow brother! butter smooth!! Great!!!
@framer.university
6 ай бұрын
Thanks mate 🙌
That's why i love FRAMER. 💙
@framer.university
6 ай бұрын
🫶🫶
Loving it man
@framer.university
6 ай бұрын
thank you! :)
Great content as always🙏🥺
@framer.university
6 ай бұрын
Glad you think so!
Hi this is awesome! Please just add the feature to snap to sections/target and this would be my favourite tool! So we can build amazing 100vh sites with smooth scroll!
Amazing!
@framer.university
Ай бұрын
Thank u so much 🫶
i was trying to figure this out last night 💀 thanks!!!
@framer.university
6 ай бұрын
Happy to hear i could help 🫶
Wow thanks for this! :)
@framer.university
4 ай бұрын
Glad you liked this🫶
Incredible! Thank you Nandy
@framer.university
6 ай бұрын
My pleasure:))
Awesome!!
@framer.university
6 ай бұрын
Thank you, Agustin 🫶
Hi Nandi! I added this Smooth scroll effect to make the scroll experience smooth in my Framer site. It worked fine. But I didn’t like the effect as much as I expected. It looked a bit weird & glitch-y on dark mode sites. So I deleted the component to get rid of this effect. The issue is that even after deleting it the website still behaves as if it has smooth scrolling. One solution to it could be creating a fresh website from scratch but the issue with this is that I have a Framer premium (Basic) subscription active on this site and I can’t get rid of this smooth scroll.
@framer.university
17 күн бұрын
Make sure to republish your site once u removed the comp. The effect should be removed.
Hi, I have an issue when you place the mouse on the scrollbar, sometimes the scroll is not smooth, it only ticks if we use the scroll on the mouse and do not drag the bar with the mouse, the animation is not smooth and if you place the pointer on the page it always works normally. I hope you know the solution to this problem, best regards
Thats amazing brother !! Could you make a tutorial on the creation of this component ?
@framer.university
2 ай бұрын
just posted a video about this, but i know you know that already 😉
how to implemet this smoothScroll in react js..?,
Hello, Nandi First of all, I want to thank you so much for creating this wonderful component. I used to use a script to accomplish the same effect, but that caused the website to lag. I really like the one you made, but there is a tiny issue I found: when I use this component, the scroll position is preserved when I click into a button (link, project, another page of the website ). This only occurs on the first click. Thank you once more for the fantastic work:D
@framer.university
5 ай бұрын
Hey thanks for the kind words. It shouldn't be happening, since it was already fixed. Make sure to go to the assets panel and click the update button next to the smooth scroll component, so you'll have the latest version.
hey, can you make a video on horizontal scrolling in a section? BTW amazing content.
@framer.university
6 ай бұрын
Yes! I’ll make a video on the in the future for sure 👍
Great stuff - does this work with scroll overflow containers? Didn’t work with mine
@framer.university
6 ай бұрын
Go ahead to assets find the Smooth Scroll component and click update. It should be fixed.
The remix component didn't work. The remix button in site is taking you to the site's home page.
@framer.university
Ай бұрын
It should work. framer.com/projects/new?duplicate=qxZ7TJLKUWww9kv8q7XB&via=nandi
the component was working perfectly but recently it just started causing some jitter and lag on my site even after updating it , any idea what's causing this issue , i even tried the component on new page and empty project
@framer.university
12 күн бұрын
Can you send me the link to your site! I’ll take a look :)
Really cool, sadly doesn't work combined with the scroll loading bar. Loading bar doesn't function smoothly it lags behind but nevertheless very cool component :)
Hello! I have a question related to the overall design and launch of the site. The situation is as follows: a friend of mine asked me to make an online store for him to sell his product. Everything was fine, he liked the idea, but he asked me if he could link it to Shopify, how to give him access to his site and, in general, how to give him the version and he can do what he wants with it. If you can tell me if it is possible to do it and how. Tanks
@framer.university
6 ай бұрын
For shopify integration: framercommerce.com For delivering the site to clients: use the remix link. With that they can copy the site over to their account and start a subscription there
I get the error 'failed to load' when pasting into an existing project, but it works in a new project. Do you have any solutions?
@framer.university
4 ай бұрын
Can you send a remix of that project?
Hi Nandi the smooth scroll is not acting right on safari browser
@framer.university
20 сағат бұрын
Hey! Can you tell me what do you notice with it?
So its like component works as effect? Is it the way to understand it?
@framer.university
6 ай бұрын
Exactly. You add this component to your main desktop breakpoint, and it will adjust the scrolling behavior of your site.
I'm confused, the link goes to a calendar page that has nothing to do with the video.
@framer.university
2 ай бұрын
Check back on the site at the given time 👀
Amazing tutorial! For some reason when I put it in a frame (a specific page), all other elements "shrink" and disappear. Is there a reason? it works on other pages...
@framer.university
5 ай бұрын
It is supposed to be placed on the breakpoint level and shouldn’t be nested further down.
@user-sz5zr4dl5h
5 ай бұрын
@@framer.university Thanks a lot for responding! It's nested in the breakpoint itself and not further down, I'll try some other ways to fix it. Thanks!
Nandi we want some cool funky navigation bars ...thankk youu
@framer.university
6 ай бұрын
Example?
Please do one on horizontal scrolling
@framer.university
6 ай бұрын
How to create horizontal scrolling section in Framer?
Heya! I have added this to my site and it works great. However it doesn't seem to work with Overlays. My overlay is a long page and it's currently not scrolling at all when this is implemented (or only the background scrolls even though it's set to block). Do you have a solution to this? Many thanks!
@framer.university
6 ай бұрын
This is probably because we only optimized it for non-scrolling overlays. I’ll take a look!
@masonwong576
6 ай бұрын
@@framer.university I see. Thanks for taking a look! Look forward to hearing from you soon.
@masonwong576
6 ай бұрын
@@framer.university Hiya! I was wondering if you have managed to find a solution to the above? Many thanks!
@framer.university
6 ай бұрын
@@masonwong576 yes it has been fixed. Go to assets panel and update the component. It should be good now with overflow scroll containers as well. (those will not have smooth scroll but will be scrollable)
@masonwong576
6 ай бұрын
@@framer.universityAwesome stuff! It has worked. Many thanks!
Hey Nandi. Can't paste the component onto my Framer desktop app. And error message says can't load if I copy the component from the Remix.
@michaeltan7848
6 ай бұрын
I paste the component on the browser and it works... not sure why. But I tried again on the desktop app and still doesn't work.
@framer.university
6 ай бұрын
That’s so weird. Did you try copying the component from the resources page on Framer University?
Hello, Nandi! Is it allowed to use it in templates?
@framer.university
5 ай бұрын
Go for it!
best
@framer.university
5 ай бұрын
✌️
is there a way to do it for section scroll
@framer.university
6 ай бұрын
what is section scroll?
What about infinity scroll?
@framer.university
6 ай бұрын
That’s for next time 😁
Hi, I have a problem, the effect does not work on mobile, could you help me somehow?
@framer.university
6 ай бұрын
We intentionally turned it iff on mobile. It doesn’t feel good on mobile.
@simonmrozik
6 ай бұрын
@@framer.university oh, I understand, thanks for the answer!
failed to load when pasting, any ideas how to fix it?
@framer.university
6 ай бұрын
Idk what’s the issue. It should work.
for me it is a lot of performance drop. any idea to reduce lag?
@framer.university
2 ай бұрын
That should not happen. Do you have a preview link?
@saifi_1.1.2
2 ай бұрын
@@framer.university I'm not sure if it's smooth scroll that's causing the lag, but it is really noticeable. is it possible for you to take a look and diagnose the problem? it'll be a big help! 🙂
I tried to copy it, but it says failed to load, why?
@framer.university
5 ай бұрын
It should work just fine. Try pasting into other project. Try copying from remix.
You can simple add Embed code with html { scroll-behavior: smooth; }
@framer.university
6 ай бұрын
Wish it was that simple haha
@designh4h
6 ай бұрын
@@framer.university But it works..))..
The component is error and cannot use it
@framer.university
4 ай бұрын
I just checked it and it works fine for me. What’s your error?
How to remove 'Made in Framer' badge?
@framer.university
6 ай бұрын
Upgrade your project to a paid Framer plan. ✌️
Day 46 of asking a proper payment method for framer india!
@framer.university
6 ай бұрын
Commenting under my videos will not solve your problem. :) contact Framer support if you have issue with billing.
OMG this is so satisfying🥲
@framer.university
6 ай бұрын
I know riight? 😱
Can you please make a video of How can i change the website theme from light to dark mode
@framer.university
6 ай бұрын
It’s quite simple! When you’re creating color styles, you can specify a dark and a light version of that color. On the site it will automatically display the correct one based on user browser settings.