# Motion Index

> 실무에서 자주 쓰는 웹 애니메이션 39가지. 모두 순수 HTML·CSS와 vanilla JS로 작성되어 어떤 프레임워크에도 옮길 수 있습니다. 각 링크의 .md에는 설명, 조정 가능한 값, HTML·CSS·JS 코드, 옮길 때 지킬 규칙이 들어 있습니다.

적용할 때 공통 규칙:

- 움직임은 CSS(transition·animation·@keyframes)가 맡고, JS는 상태(class·속성·popover·dialog)를 바꾸는 일만 합니다. 옮길 때도 이 역할 분리를 유지하세요.
- `prefers-reduced-motion: reduce` 블록과 `@supports` 가드는 지우지 말고 함께 옮기세요. 지원하지 않는 브라우저에서도 콘텐츠는 정적으로 보여야 합니다.
- 렌더링 비용 등급을 지키세요. transform·opacity로 만든 효과를 top·left·width·height 같은 layout 속성으로 바꾸지 마세요.
- `demo-`로 시작하는 class는 미리보기 모양을 위한 것이므로 옮기지 말고, 대상 코드의 기존 요소와 스타일을 쓰세요.
- class 이름과 selector는 대상 코드의 이름 규칙에 맞게 바꾸고, 스타일링 방식(CSS Modules, Tailwind, CSS-in-JS 등)에 맞춰 옮기세요. Tailwind라면 @keyframes와 복잡한 selector는 전역 CSS나 @layer에 두는 편이 읽기 쉽습니다.
- document에 이벤트를 위임한 vanilla JS는, React·Vue·Svelte 등에서는 해당 컴포넌트의 이벤트 핸들러와 ref로 옮기세요. `getElementById`로 찾던 요소는 ref로 바꾸세요.
- 수치(시간·거리·easing): "조정한 값"은 사용자가 직접 고른 값이므로 디자인 토큰으로 바꾸지 말고 그대로 쓰세요. "기본값"은 값이 거의 같은(차이 10% 이내) 토큰이 있을 때만 토큰으로 바꾸고, 그렇지 않으면 예제 값을 쓰되 가까운 토큰이 있다는 사실을 보고에 적으세요.
- 요소를 없애기 전(조건부 렌더링에서 빠질 때, 목록에서 삭제할 때)에 사라지는 효과를 보여 주려면, 상태를 바꾼 뒤 `element.getAnimations()`의 `finished`가 모두 끝나기를 기다렸다가 없애세요. `transitionend`만 기다리면 재생 시간이 0이거나 효과가 꺼져 있을 때 요소가 영영 없어지지 않습니다. 없애는 요소에 키보드 포커스가 있었다면 다음 항목처럼 알맞은 곳으로 옮기세요.
- 옮긴 뒤에는 브라우저에서 실제로 재생되는지와, 동작 줄이기 설정(`prefers-reduced-motion: reduce`)을 켰을 때 효과가 꺼지는지를 모두 확인하세요. 이 설정은 Chrome DevTools의 Rendering 패널, CDP의 `Emulation.setEmulatedMedia`, Playwright의 `reducedMotion: 'reduce'`로 켤 수 있습니다. CSS에 규칙이 있는지만 본 것은 확인이 아니며, 확인하지 못한 항목은 보고에 밝히세요.

## 기법

어떤 요소에도 붙여 쓸 수 있는 애니메이션 방법입니다.

- [Spring easing 생성기](https://motion-lib.pages.dev/spring.md): 스프링처럼 튕기는 움직임 곡선을 만듭니다. (CSS, transform)
- [Clip-path reveal](https://motion-lib.pages.dev/clip-reveal.md): 가려 둔 부분을 조금씩 열어 요소를 드러냅니다. (CSS, clip-path)
- [단어 단위 텍스트 reveal](https://motion-lib.pages.dev/word-reveal.md): 단어가 하나씩 아래에서 올라옵니다. (CSS, transform)
- [3D flip](https://motion-lib.pages.dev/flip-3d.md): 카드와 플립 시계를 3D로 뒤집습니다. (JS, transform (rotateX, rotateY))
- [Hover 패턴 모음](https://motion-lib.pages.dev/hover-patterns.md): 링크 밑줄, 이미지 확대, 화살표 이동을 모았습니다. (CSS, transform)
- [포인터 따라 기울기 · 조명](https://motion-lib.pages.dev/pointer-tilt.md): 카드가 마우스 쪽으로 기울고, 마우스 위치에 빛이 비칩니다. (JS, transform, background)
- [FLIP](https://motion-lib.pages.dev/flip-technique.md): 위치가 바뀌는 요소를 부드럽게 옮겨 줍니다. (JS, transform (Web Animations API))
- [View Transitions](https://motion-lib.pages.dev/view-transitions.md): 화면을 바꾸는 코드를 감싸기만 하면 브라우저가 전환을 만들어 줍니다. (JS, ::view-transition-group (transform, size))
- [가로 스크롤 섹션](https://motion-lib.pages.dev/horizontal-scroll.md): 아래로 스크롤하는 동안 카드가 옆으로 지나갑니다. (CSS, transform)
- [Motion path](https://motion-lib.pages.dev/motion-path.md): 요소가 정해 둔 곡선을 따라 이동합니다. (CSS, offset-distance)
- [Shape morph](https://motion-lib.pages.dev/shape-morph.md): 아이콘과 도형의 모양이 부드럽게 바뀝니다. (JS, clip-path)
- [Odometer 숫자 롤링](https://motion-lib.pages.dev/odometer.md): 자리마다 숫자가 굴러가며 새 값으로 바뀝니다. (JS, transform)
- [Typewriter](https://motion-lib.pages.dev/typewriter.md): 글자가 한 자씩 찍히고 커서가 깜빡입니다. (CSS, width, border-color)
- [Scroll-snap 캐러셀](https://motion-lib.pages.dev/snap-carousel.md): 가운데에 온 항목만 크고 선명하게 보입니다. (CSS, transform, opacity)
- [배경 gradient drift](https://motion-lib.pages.dev/aurora.md): 흐린 색 덩어리가 천천히 떠다니는 배경입니다. (CSS, transform)

## 컴포넌트

자주 쓰는 UI 부품에 맞춘 애니메이션입니다.

- [페이드 업 등장](https://motion-lib.pages.dev/fade-up.md): 요소가 아래에서 살짝 떠오르며 나타납니다. (CSS, transform, opacity)
- [순차 등장 (Stagger)](https://motion-lib.pages.dev/stagger.md): 목록 항목이 짧은 간격을 두고 차례로 나타납니다. (CSS, transform, opacity)
- [스크롤 등장](https://motion-lib.pages.dev/scroll-reveal.md): 스크롤해서 화면에 들어올 때 나타납니다. (CSS, transform, opacity)
- [버튼 hover · press](https://motion-lib.pages.dev/button-press.md): 마우스를 올리면 떠오르고, 누르면 살짝 작아집니다. (CSS, transform, box-shadow)
- [토글 스위치](https://motion-lib.pages.dev/toggle-switch.md): 켜고 끌 때 손잡이가 살짝 튕기며 이동합니다. (CSS, transform, background-color)
- [체크 표시 그리기](https://motion-lib.pages.dev/check-draw.md): 원과 체크 표시를 차례로 그립니다. (CSS, stroke-dashoffset)
- [스켈레톤 shimmer](https://motion-lib.pages.dev/skeleton.md): 콘텐츠를 불러오는 동안 빛이 지나가는 자리 표시자입니다. (CSS, transform)
- [로딩 스피너](https://motion-lib.pages.dev/spinner.md): 테두리 한쪽만 색이 다른 원이 돕니다. (CSS, transform)
- [모달 열기 · 닫기](https://motion-lib.pages.dev/modal.md): 모달이 열릴 때와 닫힐 때 모두 부드럽게 전환됩니다. (JS, opacity, scale)
- [Bottom sheet](https://motion-lib.pages.dev/bottom-sheet.md): 아래에서 올라오고, 손잡이를 끌어내리면 닫힙니다. (JS, translate)
- [아코디언](https://motion-lib.pages.dev/accordion.md): 내용 높이를 몰라도 부드럽게 펼치고 접습니다. (JS, grid-template-rows, transform)
- [토스트 알림](https://motion-lib.pages.dev/toast.md): 화면 아래에서 올라왔다가 잠시 후 사라집니다. (JS, transform, opacity)
- [읽기 진행률 바](https://motion-lib.pages.dev/read-progress.md): 스크롤한 만큼 상단 바가 채워집니다. (CSS, transform (scaleX))
- [로고 마퀴 (Marquee)](https://motion-lib.pages.dev/marquee.md): 로고 띠가 끊김 없이 옆으로 흘러갑니다. (CSS, transform)
- [숫자 카운트업](https://motion-lib.pages.dev/count-up.md): 숫자가 0부터 목표 값까지 올라갑니다. (CSS, --num (@property <integer>))
- [회전 그라디언트 테두리](https://motion-lib.pages.dev/gradient-border.md): 카드 테두리의 그라디언트가 천천히 돕니다. (CSS, --glow-angle → background)
- [입력 오류 흔들기](https://motion-lib.pages.dev/shake.md): 잘못 입력하고 제출하면 입력란이 좌우로 흔들립니다. (JS, transform)
- [Popover 드롭다운](https://motion-lib.pages.dev/popover-menu.md): JS 없이 HTML 속성만으로 열고 닫는 메뉴입니다. (CSS, opacity, transform)
- [Tooltip](https://motion-lib.pages.dev/tooltip.md): 잠시 머무르면 나타나고, 마우스를 옮겨도 바로 사라지지 않습니다. (JS, opacity, transform)
- [탭 indicator 슬라이드](https://motion-lib.pages.dev/tab-indicator.md): 선택한 탭으로 배경이 미끄러져 이동합니다. (JS, transform, color)
- [좋아요 하트 burst](https://motion-lib.pages.dev/like-burst.md): 누르면 하트가 튀어 오르고 주변으로 조각이 퍼집니다. (JS, transform, opacity, fill)
- [진행률 링](https://motion-lib.pages.dev/progress-ring.md): 원형 테두리가 목표 비율까지 채워집니다. (CSS, stroke-dashoffset)
- [Typing indicator](https://motion-lib.pages.dev/typing-indicator.md): 채팅의 "입력 중" 점 세 개가 차례로 튀어 오릅니다. (CSS, transform, opacity)
- [Ripple 버튼](https://motion-lib.pages.dev/ripple.md): 누른 위치에서 물결이 퍼집니다. (JS, transform, opacity)

## Optional

- [전체 예제 한 파일](https://motion-lib.pages.dev/llms-full.txt): 모든 예제의 .md를 이어 붙인 파일