gsap stagger

gsap stagger 란 무엇인가?

gsap 은 애니메이션을 쉽게 사용할 수 있도록 해주는 라이브러리 인데, 그중에서도 stagger 속성이 아주 편하다고 생각합니다.

stagger는 첫 번째 인자로, 애니메이션을 실행할 list 를 받고, 그 list에 있는 element 들에 차례로 애니메이션을 실행 시켜줍니다.

사용예시

gsap.to(".box", {
  duration: 1,
  scale: 0.1,
  y: 40,
  ease: "power1.inOut",
  stagger: {
    grid: [7,15],
    from: "center",
    amount: 1.5
  }
});

리스트의 특정인덱스만 애니메이션 실행하기

리액트를 통해서 애니메이션을 줄때, pagination 을 자주 하게 된다. 그런데, 위와 같은 방법으로 애니메이션을 준다면, list가 바뀔때, 새로생긴 elements들 만 애니메이션이 발생하는 것이 아니라, state가 바뀌므로 re-render 되기 때문에 이전에 있던 elements들 모두 애니메이션이 발생할 것이다. gsap 의 속성은 함수로 줄 수 있고, 함수의 인자는 index, target, list 를 받는다. 우리는 index만 사용해서 새롭게 생긴 elements 들에게만 애니메이션을 줄 수 있다.

gsap.from(containerRef.current?.children, {
        scale: 0,
        scrollTrigger: {
          trigger: containerRef.current,
          start: "top 70%",
        },
        duration: (index) => {
          const delay = index - animateCursor;
          return delay >= 0 ? 0.6 : 0;
        },
        stagger: (index) => {
          const delay = index - animateCursor;
          return delay >= 0 ? delay : 0;
        }
      **});

이전까지 있던 값들은 duration 을 0으로 설정해서 애니메이션이 일어나지 않는 것 처럼 하였다. 그리고 stagger의 return 값은 해당 element 가 일어날 시간을 가리킨다. 따라서 새롭게 생긴 elements 들에게는 조금씩 증가하게 return 해주고, 이전에 있던 elements 들에게는 0을 return 해주면 이전에 있던 값들은 애니메이션이 일어나지 않고, 새롭게 생긴 elements들만 애니메이션이 일어나게 된다