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

  • @viflortiong5819
    @viflortiong5819Ай бұрын

    Super helpful! Exactly what I've been looking for. Thank you!!

  • @framer.university

    @framer.university

    Ай бұрын

    I’m glad this helped :))

  • @DarshitaPatankar
    @DarshitaPatankar2 ай бұрын

    This is great! Love your videos!

  • @framer.university

    @framer.university

    2 ай бұрын

    Thanks so much!

  • @sourabhpatil234
    @sourabhpatil2346 ай бұрын

    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

    @framer.university

    6 ай бұрын

    I am glad this helped u 🫶

  • @kaldarges
    @kaldarges6 ай бұрын

    Wow brother! butter smooth!! Great!!!

  • @framer.university

    @framer.university

    6 ай бұрын

    Thanks mate 🙌

  • @saifuddin9087
    @saifuddin90876 ай бұрын

    That's why i love FRAMER. 💙

  • @framer.university

    @framer.university

    6 ай бұрын

    🫶🫶

  • @muhammadrazanas
    @muhammadrazanas6 ай бұрын

    Loving it man

  • @framer.university

    @framer.university

    6 ай бұрын

    thank you! :)

  • @hadiskhalili8915
    @hadiskhalili89156 ай бұрын

    Great content as always🙏🥺

  • @framer.university

    @framer.university

    6 ай бұрын

    Glad you think so!

  • @leandrosilva6414
    @leandrosilva64146 ай бұрын

    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!

  • @eduardoluchtenberg
    @eduardoluchtenbergАй бұрын

    Amazing!

  • @framer.university

    @framer.university

    Ай бұрын

    Thank u so much 🫶

  • @xwye
    @xwye6 ай бұрын

    i was trying to figure this out last night 💀 thanks!!!

  • @framer.university

    @framer.university

    6 ай бұрын

    Happy to hear i could help 🫶

  • @fiamdesigns
    @fiamdesigns4 ай бұрын

    Wow thanks for this! :)

  • @framer.university

    @framer.university

    4 ай бұрын

    Glad you liked this🫶

  • @jonahzehani
    @jonahzehani6 ай бұрын

    Incredible! Thank you Nandy

  • @framer.university

    @framer.university

    6 ай бұрын

    My pleasure:))

  • @agustinroig4923
    @agustinroig49236 ай бұрын

    Awesome!!

  • @framer.university

    @framer.university

    6 ай бұрын

    Thank you, Agustin 🫶

  • @mahaveer2407
    @mahaveer240717 күн бұрын

    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

    @framer.university

    17 күн бұрын

    Make sure to republish your site once u removed the comp. The effect should be removed.

  • @ksaawry
    @ksaawry5 ай бұрын

    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

  • @mrelad.
    @mrelad.2 ай бұрын

    Thats amazing brother !! Could you make a tutorial on the creation of this component ?

  • @framer.university

    @framer.university

    2 ай бұрын

    just posted a video about this, but i know you know that already 😉

  • @user-wg2df1mq5g
    @user-wg2df1mq5g6 ай бұрын

    how to implemet this smoothScroll in react js..?,

  • @diar-nika
    @diar-nika5 ай бұрын

    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

    @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.

  • @RitikaShakkerwal
    @RitikaShakkerwal6 ай бұрын

    hey, can you make a video on horizontal scrolling in a section? BTW amazing content.

  • @framer.university

    @framer.university

    6 ай бұрын

    Yes! I’ll make a video on the in the future for sure 👍

  • @_Tal
    @_Tal6 ай бұрын

    Great stuff - does this work with scroll overflow containers? Didn’t work with mine

  • @framer.university

    @framer.university

    6 ай бұрын

    Go ahead to assets find the Smooth Scroll component and click update. It should be fixed.

  • @hardprojects47
    @hardprojects47Ай бұрын

    The remix component didn't work. The remix button in site is taking you to the site's home page.

  • @framer.university

    @framer.university

    Ай бұрын

    It should work. framer.com/projects/new?duplicate=qxZ7TJLKUWww9kv8q7XB&via=nandi

  • @DartsHell
    @DartsHell12 күн бұрын

    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

    @framer.university

    12 күн бұрын

    Can you send me the link to your site! I’ll take a look :)

  • @cr-ai-zy
    @cr-ai-zyАй бұрын

    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 :)

  • @user-ct8np9yg7v
    @user-ct8np9yg7v6 ай бұрын

    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

    @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

  • @ajsupanatp.4314
    @ajsupanatp.43144 ай бұрын

    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

    @framer.university

    4 ай бұрын

    Can you send a remix of that project?

  • @AnkushT-e1q
    @AnkushT-e1qКүн бұрын

    Hi Nandi the smooth scroll is not acting right on safari browser

  • @framer.university

    @framer.university

    20 сағат бұрын

    Hey! Can you tell me what do you notice with it?

  • @frameraddict
    @frameraddict6 ай бұрын

    So its like component works as effect? Is it the way to understand it?

  • @framer.university

    @framer.university

    6 ай бұрын

    Exactly. You add this component to your main desktop breakpoint, and it will adjust the scrolling behavior of your site.

  • @dave3k
    @dave3k2 ай бұрын

    I'm confused, the link goes to a calendar page that has nothing to do with the video.

  • @framer.university

    @framer.university

    2 ай бұрын

    Check back on the site at the given time 👀

  • @user-sz5zr4dl5h
    @user-sz5zr4dl5h5 ай бұрын

    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

    @framer.university

    5 ай бұрын

    It is supposed to be placed on the breakpoint level and shouldn’t be nested further down.

  • @user-sz5zr4dl5h

    @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!

  • @zaidsayyad5660
    @zaidsayyad56606 ай бұрын

    Nandi we want some cool funky navigation bars ...thankk youu

  • @framer.university

    @framer.university

    6 ай бұрын

    Example?

  • @Alex-dv9yj
    @Alex-dv9yj6 ай бұрын

    Please do one on horizontal scrolling

  • @framer.university

    @framer.university

    6 ай бұрын

    How to create horizontal scrolling section in Framer?

  • @masonwong576
    @masonwong5766 ай бұрын

    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

    @framer.university

    6 ай бұрын

    This is probably because we only optimized it for non-scrolling overlays. I’ll take a look!

  • @masonwong576

    @masonwong576

    6 ай бұрын

    @@framer.university I see. Thanks for taking a look! Look forward to hearing from you soon.

  • @masonwong576

    @masonwong576

    6 ай бұрын

    @@framer.university Hiya! I was wondering if you have managed to find a solution to the above? Many thanks!

  • @framer.university

    @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

    @masonwong576

    6 ай бұрын

    @@framer.universityAwesome stuff! It has worked. Many thanks!

  • @michaeltan7848
    @michaeltan78486 ай бұрын

    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

    @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

    @framer.university

    6 ай бұрын

    That’s so weird. Did you try copying the component from the resources page on Framer University?

  • @Zoorov
    @Zoorov5 ай бұрын

    Hello, Nandi! Is it allowed to use it in templates?

  • @framer.university

    @framer.university

    5 ай бұрын

    Go for it!

  • @user-ez5mm1he4g
    @user-ez5mm1he4g5 ай бұрын

    best

  • @framer.university

    @framer.university

    5 ай бұрын

    ✌️

  • @muhammadrazanas
    @muhammadrazanas6 ай бұрын

    is there a way to do it for section scroll

  • @framer.university

    @framer.university

    6 ай бұрын

    what is section scroll?

  • @hadiskhalili8915
    @hadiskhalili89156 ай бұрын

    What about infinity scroll?

  • @framer.university

    @framer.university

    6 ай бұрын

    That’s for next time 😁

  • @simonmrozik
    @simonmrozik6 ай бұрын

    Hi, I have a problem, the effect does not work on mobile, could you help me somehow?

  • @framer.university

    @framer.university

    6 ай бұрын

    We intentionally turned it iff on mobile. It doesn’t feel good on mobile.

  • @simonmrozik

    @simonmrozik

    6 ай бұрын

    @@framer.university oh, I understand, thanks for the answer!

  • @fahrulthariq6596
    @fahrulthariq65966 ай бұрын

    failed to load when pasting, any ideas how to fix it?

  • @framer.university

    @framer.university

    6 ай бұрын

    Idk what’s the issue. It should work.

  • @saifi_1.1.2
    @saifi_1.1.22 ай бұрын

    for me it is a lot of performance drop. any idea to reduce lag?

  • @framer.university

    @framer.university

    2 ай бұрын

    That should not happen. Do you have a preview link?

  • @saifi_1.1.2

    @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! 🙂

  • @-_SamsulHadi
    @-_SamsulHadi5 ай бұрын

    I tried to copy it, but it says failed to load, why?

  • @framer.university

    @framer.university

    5 ай бұрын

    It should work just fine. Try pasting into other project. Try copying from remix.

  • @designh4h
    @designh4h6 ай бұрын

    You can simple add Embed code with html { scroll-behavior: smooth; }

  • @framer.university

    @framer.university

    6 ай бұрын

    Wish it was that simple haha

  • @designh4h

    @designh4h

    6 ай бұрын

    @@framer.university But it works..))..

  • @syaifulhamid134
    @syaifulhamid1344 ай бұрын

    The component is error and cannot use it

  • @framer.university

    @framer.university

    4 ай бұрын

    I just checked it and it works fine for me. What’s your error?

  • @PAAOVijaykumar
    @PAAOVijaykumar6 ай бұрын

    How to remove 'Made in Framer' badge?

  • @framer.university

    @framer.university

    6 ай бұрын

    Upgrade your project to a paid Framer plan. ✌️

  • @LIGHT-de1zb
    @LIGHT-de1zb6 ай бұрын

    Day 46 of asking a proper payment method for framer india!

  • @framer.university

    @framer.university

    6 ай бұрын

    Commenting under my videos will not solve your problem. :) contact Framer support if you have issue with billing.

  • @user-bm7co7kb7v
    @user-bm7co7kb7v6 ай бұрын

    OMG this is so satisfying🥲

  • @framer.university

    @framer.university

    6 ай бұрын

    I know riight? 😱

  • @HemWri
    @HemWri6 ай бұрын

    Can you please make a video of How can i change the website theme from light to dark mode

  • @framer.university

    @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.