오늘의 배움 및 삽질
부드러운 스크롤 이벤트를 위해서 gsap라이브러리를 사용하고 있다.
스크롤을 내리면 작동이 안되는데, 이상하게 스크롤을 올리면 또 애니메이션이 작동하는 이상한 현상이 발생했다.
(그리고 새로고침하면 스크롤이 사라지는 현상도….)
해결책
1. Strict Mode 주석처리하기
가장 간단한 방법은 스트릭 모드를 주석처리하는 것이다. App.tsx 혹은 Main.tsx의 StrictMode 를 없애준다.
2. gsap.context() 사용하기
위의 방법이 가장 간단하지만, 근본적인 해결방법은 아니라고 할 수 있다! gsap x x react 공식문서에서는 이를 해결하기 위한 방법을 제시해준다.
GSAP X React
GSAP is a framework-agnostic animation library, that means that you can write the same GSAP code in React, Vue, Angular or whichever framework you chose, the core principles won't change. That being said - there are some React-specific tips and techniques that will make your life easier! Need som...
https://greensock.com/react/
const comp = useRef(); // create a ref for the root level element (for scoping)
useLayoutEffect(() => {
// create our context. This function is invoked immediately and all GSAP animations and ScrollTriggers created during the execution of this function get recorded so we can revert() them later (cleanup)
let ctx = gsap.context(() => {
// Our animations can use selector text like ".box"
// this will only select '.box' elements that are children of the component
gsap.to(".box", {...});
// or we can use refs
gsap.to(circle.current, { rotation: 360 });
}, comp); // <- IMPORTANT! Scopes selector text
return () => ctx.revert(); // cleanup
}, []); // <- empty dependency Array so it doesn't re-run on every render
// ...공식문서에서 안내한대로 사용하면 작동이 잘 되는 것을 확인할 수 있다!
여담으로 이제 새로고침해도 scroll이 정상작동한다 (눈물)
Uploaded by N2T