GSAP 애니메이션 구현 잘 하시는 분 계시나요 ?

Question

React 환경에서 GSAP 을 이용하여 스크롤 과정 시 텍스트가 위아래로 FadeIn/Out 하는 작업을 구현하고 있습니다.근데 start 지점이 영역을 벗어나 한참 위에 위치하고 있어 예정보다 일찍 애니메이션이 시작하게 됩니다.여기서 문제는 이전 섹션의 레이아웃들과 겹치게 되는데요, Settimeout 을 이용하여 찰나의 지연시간을 줬지만 vercel 을 이용해 실배포를 해보니 0.1 초 튕김(혹은 깜빡임) 현상이 발생하네요..이상한 건 로컬이나 github 페이지에 배포하면 해당 이슈가 발견이 안되는 겁니다.그래서 실 배포를 해보면 문제가... 아래 사진 중 초록색 start 지점이 원래 있어야 할 지점이고요.아래 사진이 오류가 되고 있는 부분입니다.빨간색 박스로 표시해둔 곳입니다. export function PcService() { const wrapEl = useRef(null); const targetEls = useRef([]); setTimeout(() => { ScrollTrigger.refresh(); // 페이지 크기나 레이아웃이 변경될 때 호출 }, 0) useGSAP( () => { const targetEl1 = targetEls.current[0]; const targetEl2 = targetEls.current[1]; const targetEl3 = targetEls.current[2]; gsap .timeline({ defaults: { duration: 1, }, scrollTrigger: { trigger: wrapEl.current, scrub: 1, start: 'top top', end: 'bottom top', pin: true, onEnter: () => { setTimeout(() => { ScrollTrigger.refresh(); // 페이지 크기나 레이아웃이 변경될 때 호출 }, 0) }, onRefresh: () => { console.log("ScrollTrigger refreshed"); }, }, }) .from(targetEl1, { opacity: 0, y: 20 }) .to(targetEl1, { opacity: 1, y: 0 }, "+=0.5") .to(targetEl1, { opacity: 0, y: -20 }, "+=0.5") .from(targetEl2, { opacity: 0, y: 20 }, "+=0.5") .to(targetEl2, { opacity: 1, y: 0 }, "+=0.5") .to(targetEl2, { opacity: 0, y: -20 }, "+=0.5") .from(targetEl3, { opacity: 0, y: 20 }, "+=0.5") .to(targetEl3, { opacity: 1, y: 0 }, "+=0.5"); }, { scope: wrapEl.current } ); return (

Service

{service.map((item, index) => (

(targetEls.current[index] = el)}>

{item.title}

{item.desc}

))}

); }

몰랑토끼 · Answer

pramer motion으로 할순없나요?

수평선 · Answer

포지션 파라메터의 이해를 요하는 이슈군요. 현재는 start: "top top", // trigger 요소의 top과 뷰포트의 top이 일치할 때 이부분을 다음처럼 바꿔보세요. 뷰포트의 위치를 조정해가면서 테스트해보세요 start: "top top-=100",

GSAP 애니메이션 구현 잘 하시는 분 계시나요 ?

2개의 답변

Q&A 목록