Design Atlas↝Motion
Easing, stagger, parallax — the names behind movement, so designers and developers speak the same language. — 57 entries
Timeline sequencing타임라인 시퀀싱
A structure where a single playhead sweeps through several parallel tracks — position, scale, opacity — at once, reading each one's value as it passes, even when the tracks start and end at different points.
Scroll scrub스크롤 스크럽
Binding an animation's progress directly to scroll position, one-to-one, instead of to time — stop scrolling and the animation stops; scroll back up and it plays in reverse.
Pinning피닝
Locking a section in place on screen while the user keeps scrolling, and advancing only the content inside it — the technique behind "stay on one screen while several steps play out" in scrollytelling.
Inertia & momentum관성·모멘텀
Motion that carries the velocity you had at the moment of release, then gradually slows under friction instead of stopping dead — the "it slides as far as you threw it" feel after a flick or scroll release.
Spring chain스프링 체인
A chain of nodes where each one springs toward the node ahead of it. Move the leader and the delay and wobble compound down the chain — the motion of a tail, or a rope.
Elastic string일래스틱 스트링
A string anchored at both ends that, once plucked, vibrates like a guitar string and settles as the oscillation decays — unlike a spring chain, the whole line moves as one wave, not as separate trailing nodes.
Page curl페이지 컬
A page corner lifting and curling like a real sheet of paper being peeled back, hinting the reverse side beneath it. E-book and magazine apps use it to signal "there's a next page."
Paper fold페이퍼 폴드
A surface folding and unfolding like a fan or an accordion. Where page curl rolls up a single corner, paper fold divides the whole surface into segments that hinge like joints.
Coverflow커버플로
A gallery where the center card faces forward at full size while the ones beside it tilt away in perspective, shrinking with distance — made famous by old iTunes' album-cover browser.
3D carousel3D 캐러셀
Cards placed evenly around a cylinder, with the whole group rotating — a carousel where cards continuously orbit from front to back. Unlike coverflow, nothing "switches index" — the ring itself just keeps turning.
Infinite zoom인피니트 줌
A loop that looks like it keeps zooming in forever through a self-similar pattern — in reality just a handful of layers relaying the same size cycle with staggered timing.
Split-flap display스플릿 플랩
The flick-flick-flick of an airport or train-station departure board, each character cell flapping through letters until it lands on the target — with columns settling at slightly staggered moments.
Odometer오도미터
A counter where each digit is a vertical reel that spins, the way a car's mechanical odometer changes — the next digit slides up (or down) into place instead of the text just swapping instantly.
Cursor morph커서 모프
Hiding the system cursor and replacing it with an element that changes size, shape, and label depending on what it's currently hovering — growing over a link, thinning into a caret over text.
Liquid button리퀴드 버튼
Droplets that rise and merge seamlessly into a button's surface, as if absorbed by it — built with a "gooey" filter that smoothly melds two shapes together once they get close.
Staggered grid wave스태거드 그리드 웨이브
Delaying each grid cell not by its index order but by its distance from a center point — a ripple spreading outward from one spot, like a stone dropped in a pond.
Path-follow text패스 팔로우 텍스트
Text set along an SVG curve instead of a straight baseline, then moving continuously along that curve — common on circular logo badges and curved headlines.
Gooey menu구이 메뉴
A floating action button whose sub-items bud off like droplets when it opens — items start fused to the main button as one blob, then smoothly pinch apart as they spread.
The 12 principles of animation애니메이션 12원칙
Twelve rules for making a drawing feel alive, codified by Disney animators Ollie Johnston and Frank Thomas in their 1981 book The Illusion of Life. Much of today's UI motion vocabulary traces back to this list.
Staging스테이징
The principle of making one idea read clearly at a time — using silhouette, framing and timing to tell the viewer's eye exactly where to look. The name comes straight from stage direction.
Straight ahead vs pose to pose스트레이트 어헤드 vs 포즈 투 포즈
Two opposite ways to build an animation. Straight ahead draws sequentially from the first frame with no fixed endpoint; pose to pose plans the key poses first, then fills in the frames between them.
Slow in and slow out슬로우 인 슬로우 아웃
The principle of clustering drawings near the start and end of a move and spacing them wider in the middle, so the action accelerates and decelerates — the direct ancestor of CSS's ease-in-out.
Arcs아크
The observation that almost all living motion traces a slight curve, not a straight line — because it pivots around a joint or bends under gravity.
Timing and spacing타이밍과 스페이싱
How many drawings an action takes (timing) and how tightly they cluster (spacing) decide not just speed but weight and personality.
Exaggeration이그재저레이션
Pushing an action or expression further than real life reads as more believable and legible, not less — pure realism often looks flat on screen.
Solid drawing솔리드 드로잉
The principle that even a 2D drawing should read as a solid 3D form with real weight and balance — not a flat silhouette sliding around.
Appeal어필
How clearly and compellingly a character's design reads at a glance. It doesn't mean "cute" — a villain can have plenty of appeal — it means a simple, legible design.
Smear frame스미어 프레임
A traditional-animation trick for motion too fast to render frame-by-frame: draw the single fastest instant as a stretched, multi-image blur instead.
Holds홀드
Deliberately freezing on a pose partway through an action so it has time to register. Motion that never pauses ends up leaving nothing memorable behind.
Moving hold무빙 홀드
A hold that keeps the pose but never goes fully static — a tiny continuous drift, like breathing, because a truly frozen frame reads as dead rather than paused.
Lead and lag리드 앤 래그
The principle that connected body parts never move in perfect unison — one part leads, the rest trail slightly behind, in a continuous phase offset. In a walk, the hips lead and the shoulders lag a beat behind.
Drag and settle드래그 앤 세틀
The pointer-driven descendant of follow-through and overlap: while dragging, the object trails the cursor on a slight elastic lag; on release, it keeps going on its own momentum, overshoots, and springs into place.
Easing이징
The curve that decides how an animation's speed changes over time — linear, ease-in, ease-out and back all feel completely different over the same distance.
Cubic bezier큐빅 베지어
A four-number function that shapes an easing curve from two control points — written as cubic-bezier(x1, y1, x2, y2).
Spring animation스프링 애니메이션
Motion computed from physical quantities — stiffness, damping — instead of a fixed duration. It overshoots the target and settles with a bounce.
Stagger스태거
Animating a group of elements with a small delay between each, instead of all at once — so a list or grid ripples in instead of popping in as a block.
Parallax패럴랙스
Moving near layers fast and far layers slow to fake depth — background, midground and foreground scroll at different speeds.
Scroll reveal스크롤 리빌
Triggering a fade-in or slide-up animation the moment an element enters the viewport, using IntersectionObserver.
Scroll-driven animation스크롤 기반 애니메이션
A native CSS feature that wires scroll progress directly into an animation's timeline — no JavaScript. animation-timeline is the key property.
Marquee마퀴
Text or logos that scroll endlessly across the screen. It keeps the name of the old <marquee> HTML tag, but today it is built with a CSS animation.
Typewriter타이프라이터
Text that appears one character at a time like a typewriter, with a blinking cursor trailing the last letter.
Morphing모핑
A shape smoothly changing into a different shape — not color or position, but the points of the outline itself moving.
FLIP technique플립 기법
A technique that measures an element's position before (First) and after (Last) a layout change, snaps it back with a transform (Invert), then animates that transform away (Play) — a layout jump becomes a smooth move.
View Transition뷰 트랜지션
A native browser API that automatically cross-fades or morphs between the "before" and "after" states of a page or DOM change, via document.startViewTransition().
Keyframes키프레임
The CSS syntax for defining not just a start and end but intermediate stops (0%, 50%, 100%…) and chaining them into one animation.
Squash and stretch스쿼시 앤 스트레치
The animation principle where a moving or colliding object squashes and stretches while keeping its apparent volume — the first of Disney's 12 principles of animation.
Anticipation애니티시페이션
A small wind-up in the opposite direction before the main move — like a golf swing's backswing, it tells the viewer what's about to happen before it happens.
Follow-through팔로우 스루
The principle that trailing parts — hair, a coat, a tail — keep moving from inertia after the main body stops, catching up a beat later. It pairs with "overlapping action."
Motion path모션 패스
A CSS feature that moves an element along an arbitrary path — a curve, a spiral, anything drawn as SVG — instead of a straight line, built with offset-path and offset-distance.
Split text reveal스플릿 텍스트 리빌
Breaking a sentence into individual characters or words, wrapping each in its own element, and revealing them one by one with a stagger. Libraries like SplitType or GSAP's SplitText automate the splitting.
Count-up카운트업
A number animating rapidly from zero (or its previous value) up to a target — common on dashboard stats and KPI cards.
Shimmer시머
A band of light sweeping diagonally across a skeleton placeholder to signal "still loading."
Pulse펄스
A gentle repeating grow-and-shrink or fade cycle that makes an element feel "alive." Common on notification dots and recording indicators.
Shake셰이크
An element rapidly wiggling left and right a few times — instant feedback for an invalid input or failed action.
Bounce바운스
An animation that keeps bouncing a few times after reaching its target before settling — mimicking a physical ball.
Card flip카드 플립
A card rotating 180° around its Y axis to reveal its back — a 3D effect built with perspective and transform-style: preserve-3d.
Blur-in블러 인
An entrance where an element starts out of focus and sharpens into view — animating filter: blur() together with opacity.