i need a smooth scrolling . but when i set SmoothScroll it gives an error which is
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/gsap_all.js?v=27ad7a06' does not provide an export named 'ScrollSmoother'
this is my code
import React, { useLayoutEffect } from 'react';
import gsap from 'gsap';
import { ScrollToPlugin } from 'gsap/all';
import { ScrollTrigger } from 'gsap/all';
import { ScrollSmoother } from 'gsap/all';
gsap.registerPlugin(ScrollToPlugin, ScrollTrigger,ScrollSmoother);
import "./Navbar.css"
function Navbar() {
useLayoutEffect(() => {
let ctx = gsap.context(() => {
ScrollSmoother.create({
smooth: 1
});
});
return () => ctx.revert();
}, [])
const toHome = () => {
gsap.to(window, { scrollTo: 0, scrollBehavior: "smooth",ease: "power2.inOut" });
};
const toAbout = () => {
const aboutPage = document.getElementById("page2");
gsap.to(window, { scrollTo: aboutPage.offsetHeight * 2, scrollBehavior: "smooth" });
};
const toPortfolio = () => {
const portfolioPage = document.getElementById("page3");
gsap.to(window, { scrollTo: portfolioPage.offsetHeight * 4, scrollBehavior: "smooth" });
};
const toMySkills = () => {
const skillPage = document.getElementById("page4");
gsap.to(window, { scrollTo: skillPage.offsetHeight * 6, scrollBehavior: "smooth" });
};
const toContact = () => {
const contactPage = document.getElementById("page5");
gsap.to(window, { scrollTo: contactPage.offsetHeight * 8, scrollBehavior: "smooth" });
};
return (
<div className="navbar">
<div className="portfolio-container">
<h1>Portfolio</h1>
</div>
<div className="nav-links-container">
<ul>
<li className='nav-link' onClick={toHome}>Home</li>
<li className='nav-link' onClick={toAbout}>About</li>
<li className='nav-link' onClick={toPortfolio}>Portfolio</li>
<li className='nav-link' onClick={toMySkills}>My Skills</li>
<li className='nav-link' onClick={toContact}>Contact</li>
</ul>
</div>
</div>
)
}
export default Navbar
