Easing functions for smooth animations and transitions.
Easing functions take a normalized time t in [0, 1] and return
a transformed value, typically also in [0, 1].
Variants
Most easing functions come in three variants:
*_in- Starts slow, accelerates (ease-in)*_out- Starts fast, decelerates (ease-out)*_in_out- Starts slow, speeds up, then slows down
Examples
# Apply quadratic easing to a time value
Visualize.Ease.quad_in(0.5) # => 0.25
# Use with interpolation for animations
t = 0.5
eased_t = Visualize.Ease.cubic_in_out(t)
current_value = start + (end - start) * eased_tCSS Integration
For LiveView transitions, you can use CSS easing functions instead. These Elixir functions are useful for:
- Server-side pre-computation of animation frames
- Generating animated SVG paths
- Data-driven animations with d3-style transitions
Summary
Functions
Back ease-in: overshoots slightly before starting.
Back ease-in with custom overshoot amount
Back ease-in-out: overshoots at both ends
Back ease-out: overshoots then settles at target
Back ease-out with custom overshoot amount
Bounce ease-in: bounces at the start
Bounce ease-in-out: bounces at both ends
Bounce ease-out: bounces at the end (like a ball)
Returns an easing function by name.
Circular ease-in: 1 - sqrt(1 - t²)
Circular ease-in-out
Circular ease-out: sqrt(1 - (t-1)²)
Cubic ease-in: t³
Cubic ease-in-out
Cubic ease-out: 1 - (1-t)³
Elastic ease-in with spring-like oscillation.
Elastic ease-in-out with spring-like oscillation
Elastic ease-out with spring-like oscillation
Exponential ease-in: 2^(10(t-1))
Exponential ease-in-out
Exponential ease-out: 1 - 2^(-10t)
Generates a list of eased values for animation frames.
Linear easing (no easing). Returns t unchanged.
Returns all available easing function names.
Polynomial ease-in with configurable exponent.
Polynomial ease-in-out with configurable exponent
Polynomial ease-out with configurable exponent
Quadratic ease-in: t²
Quadratic ease-in-out
Quadratic ease-out: 1 - (1-t)²
Sinusoidal ease-in: 1 - cos(t * π/2)
Sinusoidal ease-in-out: -(cos(πt) - 1) / 2
Sinusoidal ease-out: sin(t * π/2)
Functions
Back ease-in: overshoots slightly before starting.
The overshoot amount can be configured (default ~1.7).
Back ease-in with custom overshoot amount
Back ease-in-out: overshoots at both ends
Back ease-out: overshoots then settles at target
Back ease-out with custom overshoot amount
Bounce ease-in: bounces at the start
Bounce ease-in-out: bounces at both ends
Bounce ease-out: bounces at the end (like a ball)
Returns an easing function by name.
Examples
easing = Visualize.Ease.by_name(:cubic_in_out)
easing.(0.5) # => 0.5Circular ease-in: 1 - sqrt(1 - t²)
Circular ease-in-out
Circular ease-out: sqrt(1 - (t-1)²)
Cubic ease-in: t³
Cubic ease-in-out
Cubic ease-out: 1 - (1-t)³
Elastic ease-in with spring-like oscillation.
Overshoots then settles. Amplitude and period can be configured.
Elastic ease-in-out with spring-like oscillation
Elastic ease-out with spring-like oscillation
Exponential ease-in: 2^(10(t-1))
Exponential ease-in-out
Exponential ease-out: 1 - 2^(-10t)
@spec frames((number() -> float()), pos_integer()) :: [float()]
Generates a list of eased values for animation frames.
Examples
# Generate 60 frames of cubic-eased animation
frames = Visualize.Ease.frames(&Visualize.Ease.cubic_in_out/1, 60)Linear easing (no easing). Returns t unchanged.
@spec names() :: [atom()]
Returns all available easing function names.
Polynomial ease-in with configurable exponent.
Examples
poly_in(0.5, 2) # Same as quad_in(0.5)
poly_in(0.5, 3) # Same as cubic_in(0.5)
poly_in(0.5, 4) # Quartic ease-inPolynomial ease-in-out with configurable exponent
Polynomial ease-out with configurable exponent
Quadratic ease-in: t²
Quadratic ease-in-out
Quadratic ease-out: 1 - (1-t)²
Sinusoidal ease-in: 1 - cos(t * π/2)
Sinusoidal ease-in-out: -(cos(πt) - 1) / 2
Sinusoidal ease-out: sin(t * π/2)