Skip to content
Plugins (190)

tween

stable

A collection of easing functions and interpolation utilities for smooth animations: linear, quadratic, cubic, sine, exponential, back, elastic, and bounce easings, plus lerp, smoothstep, remap, and clamp helpers.

use plugin tween
27 functions Graphics
Runs with the native Zolo host

Plugin snippets can be edited in the Playground, but native capabilities are executed locally with the Zolo CLI.

/ filter jk navigate Esc clear
Functions (27)
  1. All easing functions take a normalized time `t` in the range `[0.0, 1.0]` and return a value typically also in `[0.0, 1.0]`
  2. linear Identity easing — no acceleration
  3. ease_in_quad Quadratic ease-in (accelerate from zero)
  4. ease_out_quad Quadratic ease-out (decelerate to zero)
  5. ease_in_out_quad Quadratic ease-in then ease-out
  6. ease_in_cubic Cubic ease-in
  7. ease_out_cubic Cubic ease-out
  8. ease_in_out_cubic Cubic ease-in then ease-out
  9. ease_in_sine Sine ease-in
  10. ease_out_sine Sine ease-out
  11. ease_in_out_sine Sine ease-in then ease-out
  12. ease_in_expo Exponential ease-in
  13. ease_out_expo Exponential ease-out
  14. ease_in_out_expo Exponential ease-in then ease-out
  15. ease_in_back Back ease-in (slight overshoot at start)
  16. ease_out_back Back ease-out (slight overshoot at end)
  17. ease_in_out_back Back ease-in then ease-out
  18. ease_in_elastic Elastic ease-in (spring from start)
  19. ease_out_elastic Elastic ease-out (spring at end)
  20. ease_in_bounce Bounce ease-in
  21. ease_out_bounce Bounce ease-out
  22. smoothstep Smooth Hermite interpolation (clamped)
  23. smootherstep Smoother 5th-order Hermite interpolation
  24. lerp Linear interpolation between two values
  25. inverse_lerp Find the t that produces a value in a range
  26. clamp01 Clamp a value to the 0.0–1.0 range
  27. remap Map a value from one range to another

From import to result

  1. 01Import only what you use
  2. 02Copy the smallest example
  3. 03Run it with the Zolo CLI

Identity easing — no acceleration

Returns t unchanged. Use when you want constant-speed motion with no easing.

use plugin tween::{linear, lerp}

let t = 0.5
let value = lerp(0.0, 100.0, linear(t))
print(value)

Quadratic ease-in (accelerate from zero)

Quadratic ease-in: starts slow and accelerates. The progression is t². Good for objects that start from rest.

use plugin tween::{ease_in_quad, lerp}

let x = lerp(0.0, 200.0, ease_in_quad(0.3))
print(x)

Quadratic ease-out (decelerate to zero)

Quadratic ease-out: starts fast and decelerates. The inverse of ease_in_quad. Good for objects coming to a stop.

use plugin tween::{ease_out_quad, lerp}

let x = lerp(0.0, 200.0, ease_out_quad(0.7))
print(x)

Quadratic ease-in then ease-out

Quadratic ease-in for the first half and ease-out for the second half. Produces a smooth S-curve motion.

use plugin tween::{ease_in_out_quad, lerp}

let progress = ease_in_out_quad(0.5)
let x = lerp(-100.0, 100.0, progress)
print(x)

Cubic ease-in

Cubic ease-in (t³). Stronger acceleration than quadratic; the object starts very slowly.

use plugin tween::{ease_in_cubic, lerp}

let v = lerp(0.0, 1.0, ease_in_cubic(0.4))
print(v)

Cubic ease-out

Cubic ease-out. Decelerates more sharply than ease_out_quad.

use plugin tween::{ease_out_cubic, lerp}

let v = lerp(0.0, 1.0, ease_out_cubic(0.6))
print(v)

Cubic ease-in then ease-out

Cubic ease-in-out. A strong S-curve suitable for UI transitions.

use plugin tween::{ease_in_out_cubic, lerp}

let v = lerp(0.0, 500.0, ease_in_out_cubic(0.75))
print(v)

Sine ease-in

Sine ease-in based on the cosine curve. Gentler than quadratic; produces a very smooth start.

use plugin tween::{ease_in_sine, lerp}

let v = lerp(0.0, 1.0, ease_in_sine(0.5))
print(v)

Sine ease-out

Sine ease-out. Gentle deceleration using the sine curve.

use plugin tween::{ease_out_sine, lerp}

let v = lerp(0.0, 1.0, ease_out_sine(0.5))
print(v)

Sine ease-in then ease-out

Sine ease-in-out. The smoothest of the standard in-out easings.

use plugin tween::{ease_in_out_sine, lerp}

let opacity = lerp(0.0, 1.0, ease_in_out_sine(0.5))
print(opacity)

Exponential ease-in

Exponential ease-in. Extremely slow start with a dramatic acceleration toward the end. Returns exactly 0.0 when t is 0.

use plugin tween::{ease_in_expo, lerp}

let v = lerp(0.0, 100.0, ease_in_expo(0.8))
print(v)

Exponential ease-out

Exponential ease-out. Dramatic deceleration after a fast start. Returns exactly 1.0 when t is 1.

use plugin tween::{ease_out_expo, lerp}

let v = lerp(0.0, 100.0, ease_out_expo(0.2))
print(v)

Exponential ease-in then ease-out

Exponential ease-in-out. Very sharp transition in the middle; useful for dramatic reveals.

use plugin tween::{ease_in_out_expo, lerp}

let scale = lerp(0.5, 2.0, ease_in_out_expo(0.5))
print(scale)

Back ease-in (slight overshoot at start)

Back ease-in: the value dips slightly below 0.0 before accelerating forward, creating a "wind-up" effect.

use plugin tween::{ease_in_back, lerp}

let x = lerp(0.0, 300.0, ease_in_back(0.3))
print(x)

Back ease-out (slight overshoot at end)

Back ease-out: overshoots past 1.0 then settles back, creating a "snap into place" effect.

use plugin tween::{ease_out_back, lerp}

let x = lerp(0.0, 300.0, ease_out_back(0.9))
print(x)

Back ease-in then ease-out

Back ease-in-out: slight undershoot at the start and overshoot at the end.

use plugin tween::{ease_in_out_back, lerp}

let x = lerp(0.0, 200.0, ease_in_out_back(0.5))
print(x)

Elastic ease-in (spring from start)

Elastic ease-in: oscillates (springs) at the start before launching forward. May return large negative values near t=0.

use plugin tween::{ease_in_elastic, lerp}

let x = lerp(0.0, 100.0, ease_in_elastic(0.9))
print(x)

Elastic ease-out (spring at end)

Elastic ease-out: overshoots and oscillates at the end before settling, like a rubber band snapping.

use plugin tween::{ease_out_elastic, lerp}

let x = lerp(0.0, 100.0, ease_out_elastic(0.6))
print(x)

Bounce ease-in

Bounce ease-in: bounces at the start before moving forward. Built on top of ease_out_bounce.

use plugin tween::{ease_in_bounce, lerp}

let y = lerp(0.0, 50.0, ease_in_bounce(0.4))
print(y)

Bounce ease-out

Bounce ease-out: the classic multiple-bounce deceleration effect, like a ball dropping and bouncing to rest.

use plugin tween::{ease_out_bounce, lerp}

let y = lerp(200.0, 0.0, ease_out_bounce(0.7))
print(y)

Smooth Hermite interpolation (clamped)

Hermite interpolation: clamps t to [0, 1] then applies t² * (3 - 2t). Produces a smooth S-curve with zero first-derivative at both endpoints. A classic shader utility function.

use plugin tween::{smoothstep, lerp}

let alpha = lerp(0.0, 1.0, smoothstep(0.5))
print(alpha)

Smoother 5th-order Hermite interpolation

A higher-order version of smoothstep using a 5th-degree polynomial (6t⁵ - 15t⁴ + 10t³). Zero first and second derivatives at both endpoints, making it even smoother.

use plugin tween::{smootherstep, lerp}

let v = lerp(0.0, 1.0, smootherstep(0.5))
print(v)

Linear interpolation between two values

Linearly interpolates between a and b by factor t. At t=0 returns a; at t=1 returns b. Combine with any easing function to animate a value.

use plugin tween::{lerp, ease_out_cubic}

let start = 0.0
let end = 800.0
let t = 0.6
let x = lerp(start, end, ease_out_cubic(t))
print(x)

Find the t that produces a value in a range

Returns the t value that would produce v from lerp(a, b, t). The result is not clamped and may be outside [0, 1] if v is outside [a, b]. Returns 0.0 if a == b.

use plugin tween::{inverse_lerp}

let t = inverse_lerp(100.0, 500.0, 300.0)
print(t)

Clamp a value to the 0.0–1.0 range

Clamps a value to the [0.0, 1.0] range. Useful for ensuring easing inputs are valid before passing them to functions that assume normalized t.

use plugin tween::{clamp01, lerp, ease_out_quad}

let raw_t = 1.3
let t = clamp01(raw_t)
let x = lerp(0.0, 100.0, ease_out_quad(t))
print(x)

Map a value from one range to another

Maps value from the input range [in_min, in_max] to the output range [out_min, out_max]. The result is not clamped. Returns out_min if the input range has zero width.

use plugin tween::{remap}

let screen_x = remap(0.5, 0.0, 1.0, -400.0, 400.0)
print(screen_x)

let normalized = remap(75.0, 0.0, 100.0, 0.0, 1.0)
print(normalized)

Global index

Find your way through Zolo

Try an idea

Start here

9 results

9 results

en