FLIP Layout Animation (FLIP 레이아웃 애니메이션)

요소가 새 위치의 짝이 되는 요소로 이동하며 크기가 바뀌어, 하나의 요소처럼 보입니다.

[적용할 곳]에 셰어드 레이아웃 애니메이션(Shared Layout Animation)을 넣어 줘. 페이지 내 공유 요소(in-page shared element)라고도 불러.
선택이 바뀌면 요소가 이전 자리에서 새 자리로 부드럽게 이동하며 크기가 바뀌고 살포시 자리 잡게 해서, 두 개가 아니라 하나의 물체로 보이게 해 줘.
어느 순간에도 복사본은 하나만 보이게 하고, 움직이는 동안 주변 레이아웃이 튀지 않게 해 줘.

항목이 추가되면 서서히 미끄러져 들어오고, 삭제되면 애니메이션으로 빠지며 이웃 항목이 빈틈을 메웁니다.

[적용할 곳]에 리스트 아이템 등장 / 퇴장(List Item Enter/Exit) 애니메이션을 넣어 줘. 애니메이티드 리스트(animated list)라고도 불러.
새 항목은 먼저 자기 자리를 벌린 다음 서서히 미끄러져 들어오고, 삭제되는 항목은 먼저 사라진 다음 접혀서 이웃 항목이 부드럽게 빈틈을 메우게 해 줘.
삭제되는 항목은 퇴장이 끝날 때까지 자리에 남겨서, 항목을 추가하거나 지울 때 목록이 튀지 않게 해 줘.

필터나 정렬을 적용하면 그리드 타일이 재배치되거나, 사라지거나, 새 자리로 미끄러져 갑니다.

[적용할 곳]에 메이슨리 / 그리드 셔플(Masonry / Grid Shuffle) 효과를 넣어 줘. 필터형 그리드 애니메이션(filterable grid animation)이라고도 불러.
필터를 적용하면 더 이상 맞지 않는 타일은 제자리에서 작아지며 사라지고, 남은 타일은 새 자리로 부드럽게 미끄러져 가게 해 줘. 필터를 해제하면 거꾸로 재생해.
그리드 높이가 바뀌는 동안 주변 페이지가 튀지 않게 하고, 필터 컨트롤은 어떤 필터가 선택됐는지 알려 주는 진짜 버튼으로 만들어 줘.

항목을 끌면 나머지 항목이 비켜나듯 미끄러지며 새 순서로 자리 잡습니다.

[적용할 곳]에 드래그 순서 변경 리스트(Drag-to-Reorder List)를 넣어 줘. 정렬 가능한 리스트(sortable list)라고도 불러.
끄는 항목은 포인터를 바로 따라오며 살짝 떠오르고, 나머지 항목은 부드럽게 미끄러지며 비켜나게 해 줘. 놓으면 가장 가까운 자리에 빠르게 들어가게.
마우스뿐 아니라 터치도 지원하고, 키보드로 항목을 옮기는 방법도 넣어서 새 위치를 스크린 리더에 알려 줘.

콘텐츠 한 줄이 끊김 없이 옆으로 계속 흘러갑니다.

[적용할 곳]에 마퀴(Marquee)를 넣어 줘. 가로로 끝없이 흐르는 띠로, 티커(ticker)라고도 불러.
내용이 오른쪽에서 왼쪽으로 느리고 일정한 속도로 흐르고, 이음매가 튀지 않게 끊김 없이 반복되게 해 줘.
마우스를 올리면 멈추고, 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 움직이지 않게 해 줘.