Stagger (스태거)
다른 이름 Staggered Animation, Cascade
그룹 안의 항목이 짧은 간격을 두고 차례로 움직여, 한꺼번에 나타나는 대신 물결처럼 이어집니다.
쓰는 곳
리스트, 그리드, 내비게이션 메뉴, 검색 결과
변형
- from start
- from center
- from end
- grid
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 스태거(Stagger) 애니메이션을 넣어 줘. 스태거드 애니메이션(staggered animation), 캐스케이드(cascade)라고도 불러.
항목들이 짧고 일정한 간격을 두고 하나씩 차례로 떠오르며 나타나게 해서, 한꺼번에가 아니라 빠른 물결처럼 보이게 해 줘.
항목이 많아도 전체가 짧게 끝나게 하고, 화면에 들어올 때 한 번만 재생하고, 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 움직임 없이 보여 줘.비슷한 모션
ABCDEF
Split Text Stagger (스플릿 텍스트 스태거)
다른 이름 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
제목을 글자·단어·줄 단위로 나눠, 약간씩 시차를 두고 차례로 등장시킵니다.
쓰는 곳
헤드라인, 섹션 제목
[적용할 곳]에 스플릿 텍스트 스태거(Split Text Stagger) 등장 효과를 넣어 줘. 레터 스태거(letter stagger), 스태거드 텍스트 리빌(staggered text reveal)이라고도 불러.
제목을 글자 단위로 나눠, 글자마다 짧은 시차를 두고 차례로 떠오르며 나타나게 해 줘. 빠르고 부드럽게, 튕기는 느낌 없이.
제목이 화면에 들어올 때 한 번만 재생하고, 스크린 리더는 한 단어로 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.- A
- B
- C
- D
클릭해 보세요
List Item Enter/Exit (리스트 아이템 등장 / 퇴장)
다른 이름 AnimatePresence, TransitionGroup, Animated list
항목이 추가되면 서서히 미끄러져 들어오고, 삭제되면 애니메이션으로 빠지며 이웃 항목이 빈틈을 메웁니다.
쓰는 곳
할 일 목록, 알림, 장바구니 항목
[적용할 곳]에 리스트 아이템 등장 / 퇴장(List Item Enter/Exit) 애니메이션을 넣어 줘. 애니메이티드 리스트(animated list)라고도 불러.
새 항목은 먼저 자기 자리를 벌린 다음 서서히 미끄러져 들어오고, 삭제되는 항목은 먼저 사라진 다음 접혀서 이웃 항목이 부드럽게 빈틈을 메우게 해 줘.
삭제되는 항목은 퇴장이 끝날 때까지 자리에 남겨서, 항목을 추가하거나 지울 때 목록이 튀지 않게 해 줘.Fade Up (페이드 업)
다른 이름 Fade In Up, Reveal on Scroll
요소가 살짝 떠오르며 서서히 나타나, 제자리에 자리 잡는 느낌을 줍니다.
쓰는 곳
스크롤로 등장하는 섹션 제목, 카드, 이미지
[적용할 곳]에 페이드 업(Fade Up) 등장 애니메이션을 넣어 줘. 페이드 인 업(fade-in-up), 스크롤 리빌(reveal on scroll)이라고도 불러.
요소가 처음 화면에 들어올 때 살짝 떠오르면서 서서히 나타나게 해 줘. 은은하고 빠르게, 튕기는 느낌 없이.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.안에서 스크롤해 보세요
Scroll-Triggered Animation (스크롤 트리거 애니메이션)
다른 이름 Reveal on Scroll, Scroll Reveal, Animate on Scroll, Scroll Fade-In, Toggle Class on Scroll, Scroll Toggle Actions
요소가 뷰포트에 들어오거나 나갈 때 애니메이션이 한 번 재생됩니다.
쓰는 곳
페이드 인 섹션, 지연 등장
[적용할 곳]에 스크롤 트리거 애니메이션(Scroll-Triggered Animation)을 넣어 줘. 스크롤 리빌(reveal on scroll), 애니메이트 온 스크롤(animate on scroll)이라고도 불러.
각 항목이 화면에 들어올 때 한 번만 서서히 나타나며 위로 올라와 자리 잡게 해 줘. 스크롤 위치를 따라가지 말고 자체의 빠르고 부드러운 속도로 재생해 줘.
스크립트가 로드되지 않아도 콘텐츠가 보이게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 보여 줘.Entrance & Exit의 다른 모션
A
Swirl In (스월 인)
다른 이름 Swirl In Forward
요소가 한 점에서 회전하며 커지고 서서히 나타납니다.
쓰는 곳
장식 요소나 로고의 등장
[적용할 곳]에 스월 인(Swirl In) 등장 애니메이션을 넣어 줘. swirl in forward라고도 불러.
요소가 한 점에서 원래 크기로 커지면서 한 바퀴를 훌쩍 넘게 돌고, 동시에 서서히 나타나게 해 줘. 처음엔 빠르게, 자리 잡으며 느려지게.
그룹 전체가 아니라 요소 하나에만 한 번 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.ABCD
Tracking In (트래킹 인)
다른 이름 Text Tracking In, Letter-spacing In
글자가 넓게 벌어진 흐릿한 상태에서 시작해, 나타나면서 보통 자간으로 좁혀집니다.
쓰는 곳
헤드라인 텍스트 등장
[적용할 곳]에 트래킹 인(Tracking In) 텍스트 애니메이션을 넣어 줘. text tracking in, letter-spacing in이라고도 불러.
글자가 넓게 벌어진 흐릿한 상태에서 시작해, 완전히 보이게 되면서 보통 자간으로 좁혀지게 해 줘. 부드럽게, 끝에서 느려지게.
자간이 바뀌는 동안 텍스트를 가운데 정렬된 한 줄로 유지해 주변 레이아웃이 밀리지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 보통 자간으로 보여 줘.A
Zoom In (줌 인)
다른 이름 Scale In, Zoom In Up, Zoom In Down
요소가 작고 투명한 상태에서 원래 크기로 커지며 서서히 나타납니다.
쓰는 곳
모달, 이미지 라이트박스, 팝오버
[적용할 곳]에 줌 인(Zoom In) 등장 애니메이션을 넣어 줘. 스케일 인(scale in)이라고도 불러.
요소가 작고 투명한 상태에서 원래 크기로 커지며 서서히 나타나게 해 줘. 빠르고 부드럽게, 크기가 넘쳤다 돌아오는 느낌 없이.
주변 레이아웃에 영향을 주지 않게 중심에서 확대하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.