hr0513 님의 블로그

안녕하세요, hr0513입니다! 🥰 제가 프론트엔드 포트폴리오를 만드느라 오늘 연속으로 블로그 글을 올리는 중인데요,그중 GSAP를 활용하여  가로/세로 스크롤 애니메이션 구현 방법을 공유하려고 합니다.gsap 설치gsap를 설치해 주세요.npm install gsap애니메이션 적용const horizontal = document.querySelector("#horizontal");const sections = gsap.utils.toArray("#horizontal > section");gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: horizontal, ..

안녕하세요, hr0513입니다! 🥰 Next.js에서 GSAP를 사용할 때 SSR(서버 사이드 렌더링) 때문에 어려움이 좀 있었는데요,구글링으로도 해결방법을 찾지 못해서 직접 해결한 방법을 공유합니다.오류 발생useEffect 밖에 gsap.registerPlugin(ScrollTrigger) 을 넣게 되면 아래와 같은 오류가 발생해요.Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used 문제의 원인Next.js는 초기 페이지를 로드할..