Drag-to-Reorder List (드래그 순서 변경 리스트)
다른 이름 Reorder, Sortable list
항목을 끌면 나머지 항목이 비켜나듯 미끄러지며 새 순서로 자리 잡습니다.
쓰는 곳
칸반, 순서를 바꾸는 설정, 플레이리스트
변형
- vertical list
- grid sortable
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 드래그 순서 변경 리스트(Drag-to-Reorder List)를 넣어 줘. 정렬 가능한 리스트(sortable 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
클릭해 보세요
List Item Enter/Exit (리스트 아이템 등장 / 퇴장)
다른 이름 AnimatePresence, TransitionGroup, Animated list
항목이 추가되면 서서히 미끄러져 들어오고, 삭제되면 애니메이션으로 빠지며 이웃 항목이 빈틈을 메웁니다.
쓰는 곳
할 일 목록, 알림, 장바구니 항목
[적용할 곳]에 리스트 아이템 등장 / 퇴장(List Item Enter/Exit) 애니메이션을 넣어 줘. 애니메이티드 리스트(animated list)라고도 불러.
새 항목은 먼저 자기 자리를 벌린 다음 서서히 미끄러져 들어오고, 삭제되는 항목은 먼저 사라진 다음 접혀서 이웃 항목이 부드럽게 빈틈을 메우게 해 줘.
삭제되는 항목은 퇴장이 끝날 때까지 자리에 남겨서, 항목을 추가하거나 지울 때 목록이 튀지 않게 해 줘.A
끌어 보세요
Drag (드래그)
다른 이름 Draggable, Drag constraints
드래그하면 요소가 포인터를 따라오며, 움직일 영역이나 축을 제한할 수 있습니다.
쓰는 곳
슬라이더, 정렬 가능한 카드
[적용할 곳]에 드래그(Drag) 인터랙션을 넣어 줘. 드래거블(draggable), 드래그 제약(drag constraints)이라고도 불러.
드래그하는 동안 요소가 포인터를 바로 따라오고, 허용된 영역의 가장자리에서 멈추며, 놓으면 살짝 튕기면서 원래 자리로 돌아오게 해 줘.
마우스뿐 아니라 터치로도 아래 페이지가 스크롤되지 않고 동작하게 하고, 키보드로 옮기는 방법도 마련해 줘.- A
- B
- C
- D
- E
- F
- G
- H
클릭해 보세요
Masonry / Grid Shuffle (메이슨리 / 그리드 셔플)
다른 이름 Isotope filter, Filterable grid animation
필터나 정렬을 적용하면 그리드 타일이 재배치되거나, 사라지거나, 새 자리로 미끄러져 갑니다.
쓰는 곳
포트폴리오 필터, 갤러리
[적용할 곳]에 메이슨리 / 그리드 셔플(Masonry / Grid Shuffle) 효과를 넣어 줘. 필터형 그리드 애니메이션(filterable grid animation)이라고도 불러.
필터를 적용하면 더 이상 맞지 않는 타일은 제자리에서 작아지며 사라지고, 남은 타일은 새 자리로 부드럽게 미끄러져 가게 해 줘. 필터를 해제하면 거꾸로 재생해.
그리드 높이가 바뀌는 동안 주변 페이지가 튀지 않게 하고, 필터 컨트롤은 어떤 필터가 선택됐는지 알려 주는 진짜 버튼으로 만들어 줘.Component & Layout의 다른 모션
A
Drawer Slide (드로어 슬라이드)
다른 이름 Off-canvas, Side sheet, Slide-over, Navigation drawer
사이드 패널이 왼쪽, 오른쪽, 위쪽 가장자리에서 밀려 들어오며 콘텐츠를 밀어내거나 덮습니다.
쓰는 곳
모바일 내비게이션, 설정 패널, 장바구니
[적용할 곳]에 드로어 슬라이드(Drawer Slide)를 넣어 줘. 오프캔버스(off-canvas), 사이드 시트(side sheet)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 패널이 옆 가장자리에서 콘텐츠 위로 빠르게 밀려 들어오며 부드럽게 감속하고, 닫을 때는 같은 방식으로 빠져나가게 해 줘.
열린 드로어 안에 키보드 포커스를 가두고, Escape 키나 어두운 영역 클릭으로 닫히게 하고, 닫으면 드로어를 연 버튼으로 포커스를 돌려줘.