여러 요소를 순차적으로 움직이는 도미노 애니메이션 (Stagger)
여러 요소를 순차적으로 움직이는 도미노 애니메이션 (Stagger)
"동시에 나타나면 심심하니까, 차례대로 멋지게!"
게시판 목록, 갤러리 이미지, 메뉴 아이템 등 여러 개의 요소가 있을 때
게시판 목록, 갤러리 이미지, 메뉴 아이템 등 여러 개의 요소가 있을 때
stagger 속성 하나면 마치 도미노가 쓰러지듯 시간차를 두고 애니메이션을 실행할 수 있습니다. 복잡한 for 반복문 없이 단 한 줄로 마법을 부려보세요.
[그림 1] 도미노처럼 순차적으로 실행되는 Stagger 애니메이션의 시각적 메타포
1. Stagger (시간차 애니메이션) 워크플로우 비교
모든 요소가 동시에 움직일 때와 stagger를 적용하여 순차적으로 움직일 때의 타임라인 차이입니다.
2. Stagger 고급 속성 (Advanced Options)
stagger 속성은 단순 숫자(시간) 외에도 객체 형태로 세밀한 옵션을 제공합니다.
| 속성 | 사용 예시 | 설명 |
|---|---|---|
amount |
stagger: { amount: 1 } |
각 요소 사이의 간격이 아닌, 전체 애니메이션이 완료되는 총 시간을 배분합니다. |
each |
stagger: { each: 0.1 } |
단순 숫자 stagger: 0.1과 동일합니다. 각 요소별 간격을 지정합니다. |
from |
stagger: { from: "center" } |
애니메이션이 시작되는 기준점을 지정합니다. "start", "center", "end", "edges", "random". |
grid |
stagger: { grid: [3,3] } |
2D 그리드 방사형으로 퍼지는 효과를 줍니다. |
<!-- 실습을 위해 GSAP CDN을 포함합니다 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<div class="demo-wrapper">
<div class="controls">
<button id="btn-play">도미노 재생 ▶</button>
<button id="btn-reset">초기화 ↺</button>
</div>
<div class="grid">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
</div>
</div>