Easing
The curve mapping elapsed time to progress, and the main reason motion feels right or wrong.
Easing is the function describing how an animation's progress relates to elapsed time. Linear motion — constant velocity — looks mechanical because nothing physical moves that way; everything real accelerates and decelerates.
The standard vocabulary is ease-out for things entering (fast start, gentle settle, feels responsive), ease-in for things leaving (gentle start, quick exit, feels decisive), and ease-in-out for things moving between two on-screen positions. Spring-based motion parameterizes stiffness and damping instead of duration, which produces movement that reads as physical and responds naturally to interruption.
Most "the animation feels off" complaints are easing complaints rather than duration complaints. A characteristic one: a curve that decelerates too abruptly makes an animation appear to stop and hang mid-flight before continuing. The fix is smoothing the transition between the fast and slow portions, not making the whole thing faster.
Duration still matters and the useful range is narrow. Under roughly 100 milliseconds motion is not perceived as motion; beyond roughly 500 it begins to feel like waiting. Larger objects and longer distances justify longer durations, which is why a single global duration rarely serves everything — and why two deliberately different durations in one composite animation can be correct rather than a bug.
See also15
Staggered Animation
Offsetting the start of sibling animations so a group reveals in sequence.
Design & Interface9 connections
Rhythm Game
a genre that judges player input against a musical beat, where calibration is a fairness problem, not a preference.
Play & Games11 connections
Component Story
An isolated rendered instance of a component, usable as documentation, a workbench, and a test.
Testing & Verification17 connections
Motion Design
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
Design & Interface23 connections
Reduced Motion
An operating-system preference signaling that animation should be minimized, for real medical reasons.
Design & Interface21 connections
Color Contrast
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
Design & Interface22 connections
Accessibility
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
Design & Interface44 connections
Progressive Enhancement
Building so the core experience works without scripts, with richer behavior layered on top.
Web Platform26 connections
Game Feel
The perceptual layer between input and simulation, and the tuning that makes a control scheme read as responsive.
Play & Games28 connections
Bottom Sheet
A panel that slides up from the bottom of a phone screen to show extra content or choices, often draggable between heights, placed where thumbs can reach it on large phones.
Design & Interface13 connections
Web Animations API
A browser interface that exposes the engine behind CSS animations and transitions to JavaScript, giving scripts animations they can pause, reverse, seek, and await, while still running smoothly off the main thread.
Web Platform10 connections
Keyframe Animation
Animating by setting a few key poses and letting assistants or software fill in the frames between, the workflow of hand-drawn studios carried into every animation tool and CSS transition.
Graphics & Rendering6 connections
Slider
A control that sets a value by dragging a handle along a track, borrowed from the faders of audio equipment, ideal for adjusting something approximate with instant feedback and poor for entering an exact number.
Design & Interface11 connections
Bézier Curve
The smooth curve defined by a handful of control points that underlies fonts, vector drawings, animation easing, and the pen tool in every design app.
Graphics & Rendering10 connections
View Transitions
A browser API that animates between two states of a page, or between two pages, by snapshotting the old and new views and morphing between them.
Web Platform13 connections
Linked from12
- Bézier CurveGraphics & Rendering
The smooth curve defined by a handful of control points that underlies fonts, vector drawings, animation easing, and the pen tool in every design app.
- Bottom SheetDesign & Interface
A panel that slides up from the bottom of a phone screen to show extra content or choices, often draggable between heights, placed where thumbs can reach it on large phones.
- Color ContrastDesign & Interface
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
- Game FeelPlay & Games
The perceptual layer between input and simulation, and the tuning that makes a control scheme read as responsive.
- Keyframe AnimationGraphics & Rendering
Animating by setting a few key poses and letting assistants or software fill in the frames between, the workflow of hand-drawn studios carried into every animation tool and CSS transition.
- Motion DesignDesign & Interface
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
- Reduced MotionDesign & Interface
An operating-system preference signaling that animation should be minimized, for real medical reasons.
- requestAnimationFrameWeb Platform
The browser callback that runs once per display frame just before paint, which is the right clock for visual work and stops entirely when nothing is being displayed.
- Rhythm GamePlay & Games
a genre that judges player input against a musical beat, where calibration is a fairness problem, not a preference.
- Staggered AnimationDesign & Interface
Offsetting the start of sibling animations so a group reveals in sequence.
- View TransitionsWeb Platform
A browser API that animates between two states of a page, or between two pages, by snapshotting the old and new views and morphing between them.
- Web Animations APIWeb Platform
A browser interface that exposes the engine behind CSS animations and transitions to JavaScript, giving scripts animations they can pause, reverse, seek, and await, while still running smoothly off the main thread.