List Item Enter/Exit (리스트 아이템 등장 / 퇴장)
다른 이름 AnimatePresence, TransitionGroup, Animated list
항목이 추가되면 서서히 미끄러져 들어오고, 삭제되면 애니메이션으로 빠지며 이웃 항목이 빈틈을 메웁니다.
쓰는 곳
할 일 목록, 알림, 장바구니 항목
변형
- fade + slide
- height collapse
- staggered entrance
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 리스트 아이템 등장 / 퇴장(List Item Enter/Exit) 애니메이션을 넣어 줘. 애니메이티드 리스트(animated list)라고도 불러.
새 항목은 먼저 자기 자리를 벌린 다음 서서히 미끄러져 들어오고, 삭제되는 항목은 먼저 사라진 다음 접혀서 이웃 항목이 부드럽게 빈틈을 메우게 해 줘.
삭제되는 항목은 퇴장이 끝날 때까지 자리에 남겨서, 항목을 추가하거나 지울 때 목록이 튀지 않게 해 줘.비슷한 모션
- A
- B
- C
- D
- E
- F
클릭해 보세요
FLIP Layout Animation (FLIP 레이아웃 애니메이션)
다른 이름 Layout animation, First-Last-Invert-Play
레이아웃이 바뀌면 요소들이 새 위치와 크기로 부드럽게 미끄러져 갑니다.
쓰는 곳
필터링되는 그리드, 다시 배치되는 목록
[적용할 곳]에 FLIP 레이아웃 애니메이션(FLIP Layout Animation)을 넣어 줘. 레이아웃 애니메이션(layout animation), First-Last-Invert-Play라고도 불러.
레이아웃이 바뀌면 각 요소가 툭 튀지 않고 이전 위치에서 새 위치로 미끄러지듯 이동하게 해 줘. 처음엔 빠르게, 끝에서는 부드럽게 자리 잡도록.
매 프레임 레이아웃이 다시 계산되지 않게 transform만으로 애니메이션하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 새 레이아웃으로 바꿔 줘.- A
- B
- C
- D
- E
- F
- G
- H
클릭해 보세요
Masonry / Grid Shuffle (메이슨리 / 그리드 셔플)
다른 이름 Isotope filter, Filterable grid animation
필터나 정렬을 적용하면 그리드 타일이 재배치되거나, 사라지거나, 새 자리로 미끄러져 갑니다.
쓰는 곳
포트폴리오 필터, 갤러리
[적용할 곳]에 메이슨리 / 그리드 셔플(Masonry / Grid Shuffle) 효과를 넣어 줘. 필터형 그리드 애니메이션(filterable grid animation)이라고도 불러.
필터를 적용하면 더 이상 맞지 않는 타일은 제자리에서 작아지며 사라지고, 남은 타일은 새 자리로 부드럽게 미끄러져 가게 해 줘. 필터를 해제하면 거꾸로 재생해.
그리드 높이가 바뀌는 동안 주변 페이지가 튀지 않게 하고, 필터 컨트롤은 어떤 필터가 선택됐는지 알려 주는 진짜 버튼으로 만들어 줘.Stagger (스태거)
다른 이름 Staggered Animation, Cascade
그룹 안의 항목이 짧은 간격을 두고 차례로 움직여, 한꺼번에 나타나는 대신 물결처럼 이어집니다.
쓰는 곳
리스트, 그리드, 내비게이션 메뉴, 검색 결과
[적용할 곳]에 스태거(Stagger) 애니메이션을 넣어 줘. 스태거드 애니메이션(staggered animation), 캐스케이드(cascade)라고도 불러.
항목들이 짧고 일정한 간격을 두고 하나씩 차례로 떠오르며 나타나게 해서, 한꺼번에가 아니라 빠른 물결처럼 보이게 해 줘.
항목이 많아도 전체가 짧게 끝나게 하고, 화면에 들어올 때 한 번만 재생하고, 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 움직임 없이 보여 줘.끌어 보세요
Swipe to Delete (스와이프 삭제)
다른 이름 Swipe actions, Swipe to reveal
목록 행을 옆으로 밀면 삭제나 보관 같은 동작 버튼이 드러납니다.
쓰는 곳
메일 목록, 할 일 목록
[적용할 곳]에 스와이프 삭제(Swipe to Delete) 인터랙션을 넣어 줘. 스와이프 액션(swipe actions), 스와이프 투 리빌(swipe to reveal)이라고도 불러.
행을 옆으로 끌면 손가락을 그대로 따라 움직이며 뒤에 있는 보관·삭제 같은 동작 버튼이 드러나고, 버튼이 다 보이면 멈추게 해 줘. 손을 떼면 튕김 없이 부드럽게 제자리로 미끄러지게.
가로로 밀 때도 세로 스크롤이 되게 하고, 스와이프하지 않아도 키보드와 스크린 리더로 같은 동작을 할 수 있게 해 줘.Component & Layout의 다른 모션
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
Marquee (마퀴)
다른 이름 Ticker, Infinite Scroll Text
콘텐츠 한 줄이 끊김 없이 옆으로 계속 흘러갑니다.
쓰는 곳
로고 월, 공지 띠, 키워드 배너, 뉴스 티커
[적용할 곳]에 마퀴(Marquee)를 넣어 줘. 가로로 끝없이 흐르는 띠로, 티커(ticker)라고도 불러.
내용이 오른쪽에서 왼쪽으로 느리고 일정한 속도로 흐르고, 이음매가 튀지 않게 끊김 없이 반복되게 해 줘.
마우스를 올리면 멈추고, 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 움직이지 않게 해 줘.A
Modal Scale-Fade In (모달 스케일 페이드 인)
다른 이름 Dialog open animation, Zoom-fade dialog
어두워진 페이지 위로 대화상자가 가운데에서 살짝 커지며 서서히 나타납니다.
쓰는 곳
확인 대화상자, 오버레이 속 폼
[적용할 곳]에 모달 스케일 페이드 인(Modal Scale-Fade In) 애니메이션을 넣어 줘. 대화상자 열기 애니메이션(dialog open animation), 줌 페이드 대화상자(zoom-fade dialog)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 대화상자가 가운데에서 살짝 커지며 서서히 나타나게 해 줘. 빠르고 은은하게, 튕김 없이.
대화상자가 열릴 때마다 한 번 재생하고, 포커스를 대화상자로 옮겨 그 안에 머물게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드만 써 줘.