Easing
Easing is a function or timing technique that varies an animation or transition’s rate of change over its duration.
Math for Web Design
An easing function maps animation progress or elapsed time to a non-linear value progression that controls perceived acceleration and deceleration.
- How it is used
- Shapes CSS and JavaScript animation timing so interface transitions accelerate and decelerate naturally.
- How deep it goes
- Explains cubic-Bézier control points and JavaScript progress remapping, then defers actual physics principles and formulas.
- Examples
- Uses a mobile menu, an entering page title, and a dialog animated with linear and cubic ease-out motion.
- What you can do after
- Apply it via CSS timing functions or JavaScript easing formulas to produce less abrupt animated motion.
D3.js in Action, Third Edition
An easing function controls the rate at which an animated interpolation progresses over time.
- How it is used
- Controls the perceived motion of D3 chart updates so changing visual properties feel smoother and more natural.
- How deep it goes
- Compares easing curves and demonstrates duration, delay, and ease configuration, without developing their mathematical formulas.
- Examples
- Uses an updating histogram, comparative easing graphs, and D3 examples including d3.easeCubicOut.
- What you can do after
- Apply easing via D3’s ease() method when building animated data visualizations.
Related concepts
- transitionused by · A CSS transition interpolates changes in a CSS property’s computed value over time when that value changes.
- progressuses · Progress is the degree to which an ongoing task, operation, or process has advanced toward completion or a desired outcome.
- curvekind of · A curve is a continuous or piecewise-continuous geometric path or representation of a relationship between variables.
- transition()configures · The D3 selection transition() method starts an animated transition on a selection and returns a transition for configuring interpolated changes.
- Bézier curveuses · A Bézier curve is a parametric curve whose shape is determined by control points through Bernstein basis functions.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.