gsap scrollTrigger 를 이용한 숫자 count UP 아시는분..?

Question

프로젝트 중 gsap 을 이용한 애니메이션 구현에 있는데, 며칠째 원하는 대로 동작을 안해서 고민입니다..gsap 공식 사이트에도 질문을 남겨봤고 국내외 블로그, stockoverflow 도 많이 헤집고 다녔습니다..우선 구현하고자 하는 동작은 특정 DOM 요소 도달 시 숫자가 증가하는 애니메이션인데요, gsap, scrollTrigger 를 이용해서 구현하고자 합니다.react 기반이고 다른 라이브러리들 많이 봤지만 대부분 페이지 로딩 시 바로 시작되는 거라 스크롤 해서 해당 영역에 도달했을 땐 이미 애니메이션이 끝나 있더라구요.아래 해당 코드입니다.우선 파악한 문제점으로는 트리거로 설정한 DOM 요소의 start, end 마커가 보이지 않음 (scroll-start, scroll-end 말고)특정 DOM 요소에 도달하기도 전에 애니메이션이 실행됨실행이 됐을 경우 정수가 아닌 소수점 4자리까지 보이게 됨이 정도입니다. 해결법이나 조언 구합니다.import { useRef, useEffect } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { reviewList } from './reviewList'; import RadiusInText from '../common/RadiusInText'; import style from './index.module.css'; gsap.registerPlugin(ScrollTrigger); function ClientReview() { const countEls = useRef([]); const countContainer = useRef(); useEffect(() => { reviewList.forEach((item, index) => { const countEl = countEls.current[index]; gsap.to(countEl, { innerHTML: Math.ceil(Number(item.count)), duration: 4, scrollTrigger: { trigger: countContainer.current, start: 'bottm bottom ', end: 'bottom 50%', markers: true, }, }); }); }, []); return (

미니빔 서비스를 추천하는
고객의 목소리를 들어보세요

(countEls.current[index] = el)} className={style.length}> 0
{item.title}
{item.explain}

); } export default ClientReview;

gsap scrollTrigger 를 이용한 숫자 count UP 아시는분..?

0개의 답변

#gsap 목록