-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
duration과 stagger
24.05.13 12:21 작성 조회수 47
1
안녕하세요 선생님! 수업 즐겁게 잘 듣고 있습니다!
문득 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초 라는 결과값을 확인했습니다. 어떤 상관이 있는지 궁금하여 질문 남깁니다..!
답변을 작성해보세요.
2
범쌤
지식공유자2024.05.13
안녕하세요 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의 공식 답변도 있으니 같이 확인 해보시면 좋을 것 같아 링크 남겨드립니다.
감사합니다 :)
답변 1