Make full viewport sections snap scroll in React (scroll to sections on click, animation, more)

[@vaskoooo]

Man I just discovered your channel and I’m already addicted. You have a realtà nice way to deliver concepts

[@vadim4283]

Useful video, thanks! Here 2:13 you said that you have a nice tutorial on CSS modules, could be interesting to check that

[@thedigitalceo]

Yes here ya go kzbin.info/www/bejne/oXekXo2AbrCHp9U

[@MadMan2393]

thank you, very nice and easy to follow

[@tiagomarkes_]

Awesome video, getting my first react project done for University and your video is exactly what i was looking for. Kinda found my way through it but it'd be nice if you included something about how to deal with sticky navbars on mobile with the scroll snap. Keep up the good work!

[@thedigitalceo]

Thanks! A sticky navbar shouldn’t affect anything in this tutorial.

[@michaelo4u]

Great tutorial man! keep it up :)

[@gaetansantucci2017]

shirt is so cool !

[@yahyaabdelkadousssahri9319]

I looooooooove you for making this

[@sopheaktrasarom9831]

The scroll snap not working smoothly by using mouse in safari . Do you have any solutions?

[@subaruLover475]

Hi there 👋, would it be possible to show how this is done using tailwind css? I don't seem to see any other content creator with a video on it, so it would really help. Thanks and liked the video!

[@magnacarta7045]

kzbin.info/www/bejne/n4e3m6aZaadsY6s

[@thedigitalceo]

I actually don’t use tailwind css. I only write custom css personally so I’m not sure but I imagine you’d just have to use whatever tailwind css classes that do the same

[@j.ulietta7238]

Hey, thank you for this tutorial, it helped me a lot. I have one problem tho: scrolling between sections is smooth only when I use the buttons, when I scroll it's not smooth at all. Any ideas what can be wrong? I checked all the scss files in your repo and mine are the same

[@thedigitalceo]

Wondering what do you mean by when you scroll it’s not smooth. The tutorial is meant to snap not so much be smooth. Can you describe to give a better idea on what’s happening.

[@j.ulietta7238]

@@thedigitalceo Sure :) The snapping works, it's just that when I use the buttons to go to the next section of the webpage it changes smoothly, but when I scroll to the next one there is no smooth transition. In your video it looks like the transition is nice and smooth also when you scroll - it's snapping, but smoothly. That's why I'm wondering what's wrong in my code

[@thedigitalceo]

@@j.ulietta7238 it’s been a while since this tutorial I don’t remember if the repo has exactly what I coded. What about this css property. Maybe you can add this css property to the html class or .container class: scroll-behavior: smooth;

[@devrabic]

@@thedigitalceo same here, when i scroll using the touchpad its smooth, when i scroll using my mouse it isnt smooth

[@thedigitalceo]

@@devrabic is it a Mac mouse or a mouse with a scroll wheel that has notches . It will be janky if the mouse has a wheel with the notches

[@LironTal-k4t]

Hi! what's the best way to know which section index you are currently viewing in your index component?

[@dteknyc]

Hey, do you offer tutoring?