[Feature]: Add smooth scroll animation effect, when click on links

[basavarajakj]

Feature Request When I click on 'courses' link in header component its sliding fast, Please add smooth scroll animation. It will enhance UX.

https://github.com/piyushgarg-dev/piyushgargdev-nextjs/assets/97227305/e17ee9fd-1330-498b-a9c6-eafbd622745d

[Eli4479]

I have started working on this issue, and this is happening. Can you help how to overcome this?

https://github.com/piyushgarg-dev/piyushgargdev-nextjs/assets/98244788/116c74da-a57d-47ab-80c7-8d37df1dc026

[basavarajakj]

What changes you made @Eli4479 ?

My solution.

Just add in index.css file

html {scroll-behaviour: smooth; }

When you click on the button it will scroll smoothly😀

[Rohit-Sharmaa]

@Basavarajakjbasuu the scroll behaviour is already smooth on the css file for body .

[basavarajakj]

Then its issue with tailwind i guess

[Eli4479]

What changes you made @Eli4479 ?

My solution.

Just add in index.css file

html {scroll-behaviour: smooth; }

When you click on the button it will scroll smoothly😀

This will not work; brother and I have tried to add a framer motion animation property to every component of the DOM using motion.div.

I am linking the page of the Framer motion site and my code.

Link to the page

Code which I have changed-