1 Basics of easing

1.1 Progress mapping (time → value)

An easing function defines a mapping from a progress parameter, commonly denoted \(t\), to an interpolation factor \(y\). In typical animation systems, \(t\) represents normalized elapsed time over a transition interval, so \(t=0\) corresponds to the start state and \(t=1\) corresponds to the end state. The function then produces \(y\), which determines how far along the motion is at that moment. Instead of assuming equal distances for equal time steps, easing shapes the relationship so that motion can accelerate, coast, and decelerate in a controlled way.

1.2 Interpolation and normalization

Once an easing function yields \(y\) in the range \([0,1]\), it is commonly used to interpolate between start and end values. For a scalar property \(p\), a typical form is: \[ p(t)=p_{start} + y\,(p_{end}-p_{start}) \] Some systems apply easing to a position parameter, others to rotation or opacity, and some treat \(y\) as a weight in blending multiple targets. When properties have different units or ranges, the easing factor is still unitless, while the interpolation step scales it into the correct dimensional context.

Normalization means the progress parameter is independent of duration; the same easing curve can be reused for different transition lengths by converting real time \(T\) into \(t = \frac{T}{duration}\) (with appropriate clamping).

1.3 Why easing changes perceived motion

Human perception is sensitive not just to where something moves, but how it changes speed. Pure linear progression often feels mechanical because velocity is constant and acceleration is zero. Easing introduces structured acceleration and deceleration cues, which can make UI transitions feel more responsive, reduce visual strain during speed changes, and help the motion communicate intent (for example, arriving decisively vs drifting softly).

In interface contexts, easing also affects perceived hierarchy: a fast ease-out can suggest immediacy, while a slower ease-in can indicate preparation or weight. In data visualization, easing can guide attention by controlling how quickly a curve reveals intermediate values.

1.4 Parameterization conventions (t, start/end, duration)

A common convention assumes:

  • Input \(t\) is normalized to \([0,1]\).
  • The easing function outputs \(y = f(t)\), also typically in \([0,1]\).
  • Start and end states are handled by the interpolation layer rather than the easing function itself.

Some libraries incorporate start/end values directly into the easing formula, while others keep easing purely as a function from \(t\) to \(y\). Duration is typically handled outside the easing function by normalizing time and clamping when the animation completes. For functions that overshoot, \(y\) may temporarily exceed \([0,1]\), and the downstream interpolation must tolerate that behavior.

2 Common easing types

2.1 Linear easing

Linear easing uses the identity mapping \(y=t\). It is deterministic and simple, and because acceleration is discontinuous only at the boundaries (and otherwise constant velocity), it often appears uniform. Linear curves are frequently used for debugging, mapping values over time in a strictly proportional way, and cases where “no character” is desired.

2.2 Polynomial easing

Polynomial easing uses powers of \(t\) or related transformations to produce smooth speed changes. These functions are popular because they are cheap to evaluate and provide a wide range of feel with only a small number of parameters (often just an exponent and a direction).

2.2.1 Quadratic easing

Quadratic easing uses \(t^2\)-type shapes. As an ease-in variant, it starts slowly and increases speed; as an ease-out variant, it starts quickly and slows toward the end, commonly implemented via symmetry or complementary transforms (e.g., \(1-(1-t)^2\)).

2.2.2 Cubic easing

Cubic easing uses \(t^3\)-type curves, giving a more pronounced change in velocity than quadratic. This can be useful when a transition needs a noticeable acceleration profile, such as a card snapping into place or a UI element appearing with emphasis rather than a subtle drift.

2.2.3 Quartic and beyond

Higher-degree polynomials sharpen the curve further. While they can yield strong snappy behavior, they may also concentrate most motion into a smaller time window, making the motion feel abrupt if paired with a short duration. Beyond quartic, designers often balance responsiveness against readability and comfort.

2.3 Exponential and power easing

Exponential easing uses terms of the form \(a^t\) (or equivalent constructs) to create strong asymmetry between early and late motion. Power easing generalizes polynomial behavior by raising \(t\) to an exponent, allowing a continuous spectrum between gentle and dramatic acceleration changes.

These curves are often used for transitions that should feel quickly activated (fast departure) yet settle smoothly, or to emphasize specific beats of motion in a sequence.

2.4 Sinusoidal easing

Sinusoidal easing uses sine and cosine relationships to produce smooth, periodic-like derivatives that tend to be visually pleasing. The resulting velocity curve changes gradually, often avoiding the “stair-step” sensation that can occur with lower-order polynomials when sampled coarsely.

Sinusoidal curves are frequently chosen for scroll-like effects and fades where consistent smoothness matters.

2.5 Circular easing

Circular easing uses square roots to trace an arc-like progression, producing motion that feels like transitioning along a circle segment. These functions can mimic the way something might accelerate and then ease back as the geometry of the curve “rounds off” near the end. They are useful when designers want a strong ease-in or ease-out while maintaining smoothness.

2.6 Back easing (overshoot and return)

Back easing deliberately exceeds the target before returning. The curve tilts past the endpoint (overshoot) and then reverses direction to land precisely at the finish. This behavior is often associated with a playful “anticipation” moment, such as a button slightly pulling past its resting position.

To maintain clarity, overshoot magnitude is typically constrained so that the intermediate excursion supports the illusion rather than distracting from the final state.

2.7 Elastic easing (bounce/oscillation)

Elastic easing creates oscillation around the target, similar to a damped spring but with a stylized pattern. It may overshoot multiple times with decreasing amplitude. Depending on parameter choices, the motion can feel bouncy and energetic or overly chaotic, so it is commonly reserved for occasions where the design calls for expressiveness—such as playful confirmations or exaggerated transitions in games.

3 Directional variants

3.1 Ease-in, ease-out, ease-in-out

Directional variants control where the motion is fastest. An ease-in curve starts slowly and accelerates toward the end. An ease-out curve starts quickly and decelerates at the finish. Ease-in-out combines both, usually producing a smooth acceleration phase followed by a smooth deceleration phase, which is a default choice for many general-purpose UI transitions.

Implementations often reuse a base curve and transform \(t\) to create the desired direction without changing the underlying curve family.

3.2 Symmetry and midpoint behavior

Many easing definitions are constructed to be symmetric around \(t=0.5\), meaning the speed profile before and after the midpoint mirrors itself. Symmetry ensures that the motion “feels balanced,” which can matter when multiple properties must align visually at mid-transition—for example, coordinating scale and position so the element arrives at a recognizable intermediate pose.

However, not all curves are symmetric. Asymmetric choices can emphasize anticipation or settling, which is useful for interactions that communicate “push then relax.”

3.3 Matching anticipation and follow-through

Ease direction is often paired with intent. Anticipation refers to a motion hint before the main movement, while follow-through describes how the system settles afterward. Back easing supports anticipation by overshooting early or late, while ease-in-out can approximate gentle follow-through. The key is matching the acceleration profile to what the viewer expects from the interaction: quick departure often pairs with softer finishing, whereas slower starts may align with a more decisive arrival.

4 Bézier and curve-based easing

4.1 Cubic Bézier formulation

Cubic Bézier easing represents progress using a parametric curve with two control points that shape the timing relationship between \(t\) and \(y\). In typical “CSS-style” usage, the endpoints are fixed at \((0,0)\) and \((1,1)\), and the designer selects control points that determine how the curve departs and arrives.

Because Bézier curves are defined in terms of a curve parameter rather than directly in terms of input time, practical implementations typically solve for the curve parameter that yields a given \(t\) (the x-coordinate) and then read out the corresponding y-coordinate.

4.2 Control points and intuitive tuning

Control points can be tuned to create common behaviors:

  • Moving the first control point affects early acceleration.
  • Moving the second control point affects late deceleration.

If a control point lies near the diagonal, the segment resembles linear behavior; if it deviates strongly, it can produce steep changes in velocity.

Designers often iterate by eye, aiming for smooth derivatives and avoiding excessive steepness that could make motion feel abrupt when sampled at typical frame rates.

4.3 CSS-style easing curves

Web platforms widely expose cubic Bézier easing through standardized interfaces. These interfaces typically accept four numeric values specifying two control points, while the endpoints are implied. The platform then evaluates the curve for each rendered frame.

This standardization improves interoperability across design tools and code, since the same curve parameters can produce consistent motion in CSS-based animations and in custom rendering pipelines.

4.4 Accuracy, sampling, and evaluation strategies

Evaluating Bézier easing accurately requires mapping from x (input progress) to y (output interpolation). Since x is not generally linear in the curve parameter, the relationship must be inverted numerically in many implementations.

Common strategies include:

  • Iterative root-finding (e.g., Newton-Raphson).
  • Precomputed lookup tables mapping x to y at discrete intervals, followed by interpolation.
  • Hybrid methods combining a coarse table with local refinement.

Accuracy affects smoothness, especially when animations are short or when progress increments are large due to low frame rates.

5 Spring and physics-inspired easing

5.1 Damped spring model concept

Spring-like easing is inspired by physical systems where objects oscillate and settle. A damped oscillator model produces motion that alternates around the target and gradually loses energy due to damping, resulting in a natural “settling” effect.

In UI, the aim is not physical realism but a perceptual approximation: the motion should feel weighty, responsive, and self-correcting without requiring manual overshoot tuning.

5.2 Stiffness, damping, and mass-like parameters

Spring easing often exposes parameters analogous to:

  • Stiffness (how quickly it pulls toward the target).
  • Damping (how quickly oscillations decay).
  • Mass-like terms (how heavy or sluggish the response feels).

Higher stiffness typically increases responsiveness and oscillation frequency. Higher damping reduces oscillation and can make the settle quicker and calmer.

Although implementations vary, the parameter set is chosen to allow designers to select between snappy, smooth, or bouncy behaviors.

5.3 Critical/underdamped/overdamped feel

Depending on parameter ratios, the system can behave like:

  • Underdamped: oscillations occur with decaying amplitude (bouncy, lively).
  • Critical: returns to equilibrium quickly with minimal oscillation (balanced).
  • Overdamped: returns slowly without oscillating (heavy, steady).

These qualitative regimes help designers pick a feel aligned with the interaction context, such as playful confirmations or calmer layout adjustments.

5.4 Practical constraints for UI performance

Physics-inspired easing can be more computationally involved than simple polynomials or Bézier curves. Implementations must consider:

  • How many iterations are used per frame (if numerical integration is used).
  • Whether results are cached or computed analytically.
  • Consistency across devices with different frame timing.

To keep animations smooth, engines often approximate or precompute response curves, and they clamp to final values to prevent lingering sub-pixel drift.

6 Implementation details

6.1 Discrete time sampling vs continuous evaluation

Animations typically run by sampling the easing function at discrete frame times rather than evaluating it continuously. As a result, the perceived curve depends on sampling frequency. A curve that looks smooth in analytic form may show visible steps if it changes too rapidly relative to frame intervals.

Designers can mitigate this by choosing curves with bounded derivatives, using reasonable durations, and ensuring that the interpolation responds consistently to time deltas rather than frame counts.

6.2 Frame-rate independence

Frame-rate independence means the outcome depends on elapsed time rather than how many frames were rendered. Systems compute normalized progress from actual time stamps and apply clamping at completion. When easing is applied to \(t\) derived from real time, slow frames do not “speed up” the animation; they simply skip intermediate sampled points while maintaining overall timing intent.

6.3 Numerical stability and clamping

For easing functions that overshoot or use roots/inverses (notably some Bézier evaluations), numerical error can produce values slightly outside expected ranges or cause convergence issues. Implementations commonly:

  • Clamp \(t\) to \([0,1]\) at the boundaries.
  • Clamp or otherwise bound output \(y\) when the curve is intended to stay within range.
  • Detect non-convergence and fall back to approximate results.

These practices prevent glitches such as micro-jitters near the end state.

6.4 Easing function inversion (for reverse mapping)

Some interactions require mapping from an eased value back to time, such as scrubbing a progress slider that controls a motion animation using the eased output as input. Inversion can be nontrivial for many easing functions, especially non-monotonic ones like elastic or certain overshooting curves.

For monotonic easings, inversion can use root-finding on \(f(t)-y=0\). For non-monotonic curves, inversion may require disambiguation (which crossing to use) or a different design approach.

6.5 Composing easing (chaining segments)

Complex animations may be built from multiple easing segments, each with its own curve and duration. Composition ensures smooth transitions between segments, often by:

  • Mapping local time within each segment to that segment’s \(t\) range.
  • Ensuring continuity of position at boundaries.
  • Optionally ensuring continuity of velocity (or an approximation) by selecting compatible curves or blending derivatives.

Chaining is also used for multi-stage motions such as appear → settle → emphasize, where each stage uses the feel appropriate to its role.

7 Usage in interface and animation systems

7.1 UI transitions and page navigation

Easing is central to page transitions and element enter/exit animations. A well-chosen curve can reduce perceived latency by making the motion start promptly while still feeling smooth. Navigation animations often coordinate several properties—translation, opacity, and sometimes blur—so that easing choices align and do not produce competing speed profiles.

7.2 Micro-interactions (hover, press, focus)

Micro-interactions are brief responses to user input, including hover states, pressed button feedback, and focus rings. Because these occur repeatedly and quickly, easing must feel immediate without overshooting in a distracting way. Lightweight polynomials or gentle ease-in-out curves are common, while back easing may be used sparingly for tactile “press” feedback.

7.3 Scroll and parallax effects

Scroll-linked motion benefits from monotonic, stable easing that avoids stutter as the user changes scroll velocity. Parallax often maps scroll progress directly to transform values; designers may still apply easing to soften extremes, such as easing into a parallax range rather than abruptly starting or stopping it.

7.4 Gesture-driven animation considerations

Gesture interactions involve user-controlled time and direction. Easing must respect the user’s input so that the motion does not lag or fight the gesture. In practice, systems may reduce easing use during active dragging and apply easing primarily during release or snap-to positions, where the motion can follow a predictable curve.

7.5 Coordinating multiple properties (position, scale, opacity)

When multiple properties animate together, they can share the same easing factor \(y(t)\) or use different curves tailored to each property’s role. Sharing a curve maintains coherence, while separate curves can enhance realism—for example, scaling slightly slower than translation to create depth. Coordination is evaluated by examining relative timing at key instants such as 25%, 50%, and 75% of the transition.

8 Design and tuning workflow

8.1 Choosing a feel: smooth vs snappy vs playful

Selection begins with the intended emotional tone. Smooth motion typically uses ease-in-out or sinusoidal-like curves with moderate derivatives. Snappy motion often uses stronger ease-out behavior or higher exponents to reduce settling time. Playful motion may include back or elastic effects, but should be used consistently so that the interface does not feel erratic.

8.2 Calibrating duration and distance separately

Duration controls how long the transition takes; distance or amplitude controls how much the values change. Although these are linked in perceived speed, they can be tuned independently. Designers may keep duration stable across similar interactions while adjusting distance to maintain consistent pacing, or they may alter duration to reflect hierarchy (e.g., secondary actions moving faster than primary transitions).

8.3 Consistency across components

Consistency reduces cognitive load. If similar components use different timing curves for the same kind of action, users may unconsciously notice inconsistency. Many design systems define a small set of standard curves (and durations) that components reuse, ensuring cohesive motion language across the product.

8.4 Testing with accessibility-friendly motion settings

Some users prefer reduced motion due to sensitivity to animation. Systems typically provide a setting to reduce movement magnitude, shorten duration, or replace complex curves with simpler ones (often closer to linear or minimal easing). Testing includes verifying that easing changes do not create sudden jumps or leave the interface in intermediate states when motion is curtailed.

9 Performance and tooling

9.1 Computational cost of different functions

Simple easings like linear and low-degree polynomials are computationally cheap. Bézier evaluation can be more expensive due to inversion steps. Elastic and physics-inspired easings may involve oscillatory functions or numerical integration.

Performance considerations include not only raw math cost but also how often easing is evaluated (per property, per frame) and whether many animations run concurrently.

9.2 Lookup tables and precomputation

Lookup tables store precomputed mappings from \(t\) to \(y\) at fixed intervals. During runtime, the system samples the table and interpolates between neighboring entries. This can reduce per-frame computation for complex functions, at the cost of memory and discretization error.

Choosing table resolution is a trade-off: higher resolution improves smoothness but consumes more memory and increases precomputation time.

9.3 Hardware acceleration implications

Animation performance is influenced by which rendering properties are used. Easing affects the timing of transforms and fades, but hardware acceleration also depends on whether the animated properties map to compositor-friendly operations (commonly transforms and opacity). When easing is paired with GPU-accelerated transforms, the main cost becomes sampling and scheduling rather than repainting.

9.4 Animation authoring tools and presets

Modern authoring tools provide presets and visual curve editors that allow designers to select easing without manual formula work. These tools often output standardized representations such as cubic Bézier control points or named spring presets. For developer handoff, the goal is fidelity between design previews and runtime behavior, which depends on consistent evaluation methods.

10 Pitfalls and best practices

10.1 Avoiding abrupt jumps at segment boundaries

When chaining segments, abrupt jumps can occur if the position continuity is broken or if local time normalization is inconsistent. Even if position matches exactly, mismatch in velocity can cause a noticeable kink. Best practice is to ensure boundary continuity, and when velocity continuity matters, choose compatible curves or add blending logic around the join.

10.2 Overshoot limits for readability

Overshooting easings can improve expressiveness, but excessive excursion can harm readability—text may move too far, controls may overlap unexpectedly, or attention may shift away from the intended endpoint. Practical guidance is to cap overshoot magnitude relative to component size and to ensure the final landing is unambiguous.

10.3 Handling reduced-motion preferences

Reduced-motion implementations should adjust easing complexity and motion amplitude. For example, replacing elastic behavior with a simpler ease-in-out and shortening duration helps preserve usability while respecting user preferences. Additionally, systems should avoid leaving eased animations mid-progress when the preference toggles during an active transition.

10.4 Debugging unexpected timing artifacts

Timing artifacts often come from:

  • Incorrect normalization (e.g., mixing milliseconds with seconds).
  • Clamping errors or lack of clamping at endpoints.
  • Frame-rate dependent calculations.
  • Inversion failures in Bézier easing.

Debugging typically involves visualizing \(t\) and \(y\) over time, verifying start and end states, and checking that the easing function’s monotonicity matches the animation system’s assumptions.

11.1 Timing functions vs easing functions

Timing functions are broader tools for describing how animation time maps to an animation’s progression. Easing functions are a common form of timing function specifically focused on shaping the interpolation factor. In many systems, the terminology overlaps, but easing usually refers to the mathematical curve that controls the speed profile.

11.2 Keyframe interpolation and easing per segment

Keyframe animation systems define multiple anchor states and interpolate between them. Easing can be applied globally or per segment between adjacent keyframes. Per-segment easing allows different motion “beats,” such as slow anticipation between early keyframes and faster settling afterward, while still maintaining precise control over intermediate poses.

11.3 Easing in data visualization (value curves)

In visualization, easing can be used to animate between numeric states, so that value changes follow a curve rather than a step. This can help viewers track transitions smoothly, reduce abrupt changes, and emphasize trends. Selecting an easing function here is less about physical feel and more about clarity—ensuring that animated values communicate the intended meaning without misleading speed cues.