解决导入 ScrollSmoother 失败
原标题：Failed to resolve import ScrollSmoother
It says it failed to resolve import ScrollSmoother
thats my code :
import gsap from "gsap"
import ScrollTrigger from gsap/ScrollTrigger ;
import ScrollSmoother from "gsap/ScrollSmoother";
gsap.registerPlugin(ScrollTrigger,ScrollSmoother) <-------
const Navbar = () => {
return (
Hello world
)
}
export default Navbar
thats what shows on my screen
PS: iam using vite
问题回答
Please note that while you can use this CDN for trial purposes on your test projects, it s crucial not to deploy it in production. This CDN is intended for testing purposes only.
"https://assets.codepen.io/16327/ScrollSmoother.min.js"
Alternatively, you can use the following command to install the trial package using npm:
npm install gsap-trial
For more information about trial packages, you can visit the official GSAP documentation page at the following link: GSAP Installation Documentation
import { useEffect, useRef } from react ;
import gsap from gsap ;
const SmoothScroll = ({ children }) => {
const wrapperRef = useRef(null);
const contentRef = useRef(null);
useEffect(() => {
const wrapper = wrapperRef.current;
const content = contentRef.current;
const updateScroll = () => {
gsap.to(content, {
y: -wrapper.scrollTop,
ease: power1.out ,
overwrite: auto ,
});
};
wrapper.addEventListener( scroll , updateScroll);
updateScroll();
return () => {
wrapper.removeEventListener( scroll , updateScroll);
};
}, [])
return (
)};
We can use it by importing on any page and wrapping content around it.
{children}
相关问题
Why am I receiving a Cannot read properties of null (reading studentId ) error in my code when trying to update data in a React CRUD app?
This is my first question, and english is not my first language, sorry if my question is hard to understand I was trying to make simple CRUD app with mysql database and react as the frontend, and i ...
How to use one react app into another react app?
I have two react apps, parent app and child app. and child app have an hash router. I have build the child app using npm run build, It creates build folder. That build folder moved into inside the ...
我如何利用Params(Params)在React的初期阶段进行过滤,而不是提出另一个要求?
这是我的第一个问题,请与我一起回答。 I m从事一项SPA React项目,该项目跟踪农场及其相关床位,并可使用一些帮助。 我愿就......提供一些数据。
how to get selected value in Ant Design
I want to print the selected value, and below is my option list: const vesselName = [ { value: 0 , label: ALBIDDA , }, { value: 1 , label: ALRUMEILA , }, { value: 2 ,...
why custom filter reset button is not working for antd filterdropdown in table?
I have this custom filter for date , filter button is working as expected but reset button is not working, can anyone help me,what s wrong here? Below is my code which contain handlesearch,handlereset ...
How to add a <br> tag in reactjs between two strings?
I am using react. I want to add a line break <br> between strings No results and Please try another search term. . I have tried No results.<br>Please try another search term. but ...
React DnD - "Cannot have two HTML5 backends at the same time."
I am trying to make a POC with Rails5, action Cable, React and Rails and React DnD. The purpose is to make an app like trello but for an recruitment process. My front is in ReactJS. I have 3 ...
热门标签
- winforms
- combobox
- fogbugz
- java
- date
- internationalization
- asp.net
- iis
- url-rewriting
- urlrewriter
- c#
- enums
- ocaml
- haxe
- algorithm
- string
- viewstate
- .net
- c++
- c
- symbol-table
- mysql
- database
- postgresql
- licensing
- migration
- vb.net
- vb6
- declaration
- vb6-migration
- python
- psycopg2
- backup
- vmware
- virtualization
- gnu-screen
- authentication
- desktop
- excel
- xll
- cultureinfo
- regioninfo
- oracle
- client
- session
- download
- html
- virtual
- constructor
- scenarios
- perl
- full-text-search
- javascript
- ajax
- testing
- oop
- inheritance
- vim
- encapsulation
- information-hiding