duration과 stagger

Question

안녕하세요 선생님! 수업 즐겁게 잘 듣고 있습니다! 문득 duration과 stagger 사이의 궁금증이 생겨 문의드립니다.   제가 이해한 바로는 duration = 애니메이션 진행시간의 총량 stagger = 애니메이션 진행시 아이템간의 간격 이렇게 이해하고 있습니다. 그런데 만약 duration 1초, stagger 0.5초, item * 8 (item) 0.5 (item) 0.5 (item) 0.5 (item) 0.5 ... duration이 설정한 1초를 아득히 넘어가게 되는데 GSDevTools로 확인해보니 stagger로 인해 초과되는 시간만큼 늘어나는 것으로 확인이 됩니다. 그렇다면 duration보다 stagger의 총합 길이가 더 우선이 되니 stagger의 총합 길이가 초과할 시 duration은 필요 없겠다라고 생각이 들었습니다. 그런데 GSDevTools로 확인해본 결과 duration 1초 적용시 4.5초 / 미적용시 4초 라는 결과값 을 확인했습니다. 어떤 상관이 있는지 궁금하여 질문 남깁니다..!

kindtiger · Answer

안녕하세요 eljsh95 님 😀   질문의 내용을 보면 수강생분이 얼마나 열심히 수강하고 있는지 보이는데, 해당 질문은 정말 열심히 GSAP을 공부하고 계신 것 같아 기분이 너무 좋습니다 😃   duration을 설정했어도 stagger의 시간과 아이템의 갯수가 duration을 넘어가게 된다면 stagger의 시간이 우선위로 간주되 애니메이션이 작동한다는건 알고 계실 것 같습니다.   그렇다면, duration을 적용 후 총 시간과 미적용 총 시간이 달라지는 이유에 대해 설명드리겠습니다. GSAP에서는 Stagger의 시간을 계산할 경우 앞에 처음으로 실행되는 아이템에 대해서는 시간을 계산하지 않습니다. 이유는 처음 대상은 stagger보다는 무조건 실행해야 하는 첫 아이템이기 때문입니다.   그럼 duration을 적용한 경우 duration 1초, stagger 0.5초, item * 8 아이템을 하나 제거한 7 * 0.5 + 1 로 계산되어 4.5초가 나오게 됩니다. 그리고 duration을 작성하지 않았을 경우 엔 트윈의 기본 duration은 0.5초가 기본값이므로 7 * 0.5 + 0.5가 되어 4초가 나오게 됩니다. 이렇게 계산되는 알고리즘을 가지고 있습니다. 해당 내용과 관련된 GSAP의 공식 답변 도 있으니 같이 확인 해보시면 좋을 것 같아 링크 남겨드립니다. 감사합니다 :)