Animation

SLT animations are standalone structs, not Context methods. Each animation computes an f64 value from tick counts. You pass the computed value to style or layout methods yourself.

let mut fade = Tween::new(0.0, 1.0, 30).easing(ease_out_quad);
fade.reset(ui.tick());

// Each frame: compute the value, use it however you want
let opacity = fade.value(ui.tick());
ui.text("Hello").fg(Color::Rgb(255, 255, (255.0 * opacity) as u8));

Tick-based model

Animations run on frame ticks, not wall-clock time.

ui.tick() returns a u64 frame counter that increments every render frame.
RunConfig::default().tick_rate(Duration::from_millis(16)) controls the polling interval (default 16ms / ~60fps).
All animation types use reset(tick) to set a start time and value(tick) to sample.
Lower tick_rate = smoother animations but more CPU usage.

Animation types

Tween

Linear interpolation from A to B over a fixed number of ticks.

use slt::{Tween, Context, Color};
use slt::anim::ease_out_quad;

let mut tween = Tween::new(0.0, 100.0, 60)
    .easing(ease_out_quad);

slt::run(|ui: &mut Context| {
    if ui.tick() == 0 {
        tween.reset(ui.tick());
    }
    let x = tween.value(ui.tick()) as u16;
    ui.text("sliding").ml(x);
});

Key methods:

Tween::new(from, to, duration_ticks) — constructor, linear easing by default
.easing(fn) — set easing function (builder)
.on_complete(fn) — callback when done (builder)
.reset(tick) — start/restart the tween
.value(tick) -> f64 — sample current value
.is_done() -> bool — completion check

Spring

Physics-based damped harmonic oscillator. Unlike Tween, Spring has no fixed duration -- it settles naturally based on stiffness and damping.

use slt::{Spring, Context};

let mut spring = Spring::new(0.0, 0.2, 0.85);

slt::run(|ui: &mut Context| {
    let hovered = ui.button("Hover me").hovered;
    spring.set_target(if hovered { 10.0 } else { 0.0 });
    spring.tick();

    let offset = spring.value() as u16;
    ui.text("bouncy").ml(offset);
});

Key methods:

Spring::new(initial, stiffness, damping) — constructor
- stiffness: acceleration per unit displacement (0.1..0.5)
- damping: per-tick velocity multiplier, must satisfy 0.0 < damping < 1.0 (0.8..0.95). Both bounds are enforced via debug_assert! in Spring::new (v0.19.1); release builds do not panic but values outside this range conserve or amplify energy and never settle.
.on_settle(fn) — callback when settled (builder)
.set_target(value) — change the goal position (interactive use)
.tick() — advance simulation by one frame (call once per frame)
.value() -> f64 — current position
.is_settled() -> bool — true when velocity and distance are both < 0.01

Spring does not use reset(tick). Call .tick() every frame and .set_target() to change direction.

Damping note: This damping is not the standard ODE damping ratio ζ — it is a velocity multiplier applied each tick (velocity *= damping after the spring force). A value of 1.0 would conserve energy (eternal oscillation); > 1.0 would amplify it. The recommended 0.80..=0.95 range covers fast-settle to slow-bouncy UI feel.

Keyframes

Multi-stop timeline animation, like CSS @keyframes. Each segment between stops can use its own easing.

use slt::anim::{Keyframes, LoopMode, ease_out_quad, ease_in_cubic};

let mut kf = Keyframes::new(90)
    .stop(0.0, 0.0)       // start at 0
    .stop(0.3, 100.0)     // ramp up to 100 at 30%
    .stop(0.7, 100.0)     // hold at 100 until 70%
    .stop(1.0, 40.0)      // ease down to 40
    .segment_easing(0, ease_out_quad)
    .segment_easing(2, ease_in_cubic)
    .loop_mode(LoopMode::PingPong);

kf.reset(ui.tick());
let brightness = kf.value(ui.tick());

Key methods:

Keyframes::new(duration_ticks) — constructor
.stop(position, value) — add a stop at normalized position [0.0, 1.0]. Stops are kept sorted by position after every call, so the order in which you append them does not matter — a .stop(0.7, 100.0) after .stop(1.0, 40.0) lands in the right slot. Code that relied on insertion order to identify segments will see the sorted-by-time order instead.
.easing(fn) — default easing for all segments
.segment_easing(index, fn) — override easing for segment index (0 = first-to-second stop). Out-of-range indices are silently ignored in release builds (preserving the panic-free guarantee for runtime code) and trigger a debug_assert! panic in debug builds (v0.19.1) so builder-order mistakes — calling segment_easing(2, ...) before three stops have been added — surface during development.
.loop_mode(mode) — set loop behavior
.on_complete(fn) — callback when done
.reset(tick) — start/restart
.value(tick) -> f64 — sample current value
.is_done() -> bool — completion check (always false for looping modes)

Sequence

Chain multiple tween segments end-to-end into a single timeline.

use slt::anim::{Sequence, LoopMode, ease_linear, ease_out_quad, ease_in_cubic};

let mut seq = Sequence::new()
    .then(0.0, 100.0, 30, ease_out_quad)   // slide right
    .then(100.0, 100.0, 10, ease_linear)   // pause
    .then(100.0, 0.0, 20, ease_in_cubic)   // slide back
    .loop_mode(LoopMode::Repeat);

seq.reset(ui.tick());
let x = seq.value(ui.tick());

Key methods:

Sequence::new() — constructor
.then(from, to, duration_ticks, easing) — append a segment
.loop_mode(mode) — set loop behavior
.on_complete(fn) — callback when done
.reset(tick) — start/restart
.value(tick) -> f64 — sample current value
.is_done() -> bool — completion check

Stagger

Apply the same tween to N items with a fixed delay between each start.

use slt::anim::{Stagger, LoopMode, ease_out_quad};

let items = vec!["Alpha", "Beta", "Gamma", "Delta"];
let mut stagger = Stagger::new(0.0, 1.0, 20)
    .easing(ease_out_quad)
    .delay(5)
    .items(items.len())
    .loop_mode(LoopMode::Once);

stagger.reset(ui.tick());

for (i, label) in items.iter().enumerate() {
    let opacity = stagger.value(ui.tick(), i);
    let gray = (255.0 * opacity) as u8;
    ui.text(*label).fg(Color::Rgb(gray, gray, gray));
}

Key methods:

Stagger::new(from, to, duration_ticks) — constructor
.easing(fn) — easing for each item's tween
.delay(ticks) — ticks between consecutive item starts
.items(count) — set item count (inferred from usage if not set)
.loop_mode(mode) — set loop behavior
.on_complete(fn) — callback when done
.reset(tick) — start/restart
.value(tick, item_index) -> f64 — sample value for a specific item
.is_done() -> bool — true if the most recently sampled item finished
.is_all_done(tick, item_count) -> bool — true once every item has finished, computed from pure tick arithmetic (v0.19.1). Use this when you need a single completion signal that does not depend on which item happened to be sampled last. With LoopMode::Repeat / PingPong it only reports true for the first cycle (loops re-enter after completion).

Easing functions

All easing functions have signature fn(f64) -> f64, mapping [0, 1] to [0, 1].

Function	Curve	Use case
`ease_linear`	Constant rate	Default, mechanical motion
`ease_in_quad`	Slow start	Accelerating elements
`ease_out_quad`	Slow end	Decelerating, natural stops
`ease_in_out_quad`	Slow both ends	Smooth transitions
`ease_in_cubic`	Slower start	Stronger acceleration
`ease_out_cubic`	Slower end	Stronger deceleration
`ease_in_out_cubic`	Slower both ends	Emphasis on middle speed
`ease_out_elastic`	Overshoot + oscillate	Attention-grabbing, playful
`ease_out_bounce`	Bouncing ball	Landing, drop effects

Helper: lerp(a, b, t) — linear interpolation, not clamped. Apply easing to t before calling.

use slt::anim::{lerp, ease_out_quad};

let t = ease_out_quad(0.5);
let value = lerp(0.0, 100.0, t); // ~75.0

LoopMode

Controls what happens when an animation reaches its end.

Mode	Behavior
`LoopMode::Once`	Play once, hold at final value. `is_done()` returns `true`.
`LoopMode::Repeat`	Restart from the beginning each cycle.
`LoopMode::PingPong`	Alternate forward and backward each cycle.

Applies to Keyframes, Sequence, and Stagger. Tween always plays once (use Sequence with LoopMode::Repeat for looping tweens). Spring has no loop mode -- it settles naturally.

Common patterns

Fade-in on mount

let mut fade = Tween::new(0.0, 1.0, 30).easing(ease_out_quad);
let mut started = false;

slt::run(|ui: &mut Context| {
    if !started {
        fade.reset(ui.tick());
        started = true;
    }
    let alpha = fade.value(ui.tick());
    let g = (255.0 * alpha) as u8;
    ui.text("Welcome").fg(Color::Rgb(g, g, g));
});

Button hover spring

let mut spring = Spring::new(0.0, 0.3, 0.8);

slt::run(|ui: &mut Context| {
    let btn = ui.button("Click me");
    spring.set_target(if btn.hovered { 2.0 } else { 0.0 });
    spring.tick();

    let pad = spring.value() as u16;
    ui.text(">>").ml(pad);
});

Staggered list entry

let items = vec!["One", "Two", "Three", "Four", "Five"];
let mut stagger = Stagger::new(0.0, 1.0, 15)
    .easing(ease_out_cubic)
    .delay(3)
    .items(items.len());

let mut started = false;

slt::run(|ui: &mut Context| {
    if !started {
        stagger.reset(ui.tick());
        started = true;
    }
    for (i, item) in items.iter().enumerate() {
        let t = stagger.value(ui.tick(), i);
        let brightness = (255.0 * t) as u8;
        ui.text(*item).fg(Color::Rgb(brightness, brightness, brightness));
    }
});

Loading sequence (multi-phase)

let mut loading = Keyframes::new(120)
    .stop(0.0, 0.0)     // idle
    .stop(0.25, 100.0)  // fill bar
    .stop(0.5, 100.0)   // hold
    .stop(0.75, 0.0)    // reset
    .stop(1.0, 0.0)     // idle
    .easing(ease_in_out_quad)
    .loop_mode(LoopMode::Repeat);

loading.reset(ui.tick());
let pct = loading.value(ui.tick());
ui.text(format!("[{:>3.0}%]", pct));

Chained transitions

let mut chain = Sequence::new()
    .then(0.0, 50.0, 20, ease_out_quad)    // move to center
    .then(50.0, 50.0, 30, ease_linear)     // hold
    .then(50.0, 100.0, 20, ease_in_cubic); // move to end

chain.reset(ui.tick());
let pos = chain.value(ui.tick()) as u16;
ui.text("->").ml(pos);

API quick reference

Tween


Constructor	`Tween::new(from, to, duration_ticks)`
Builder	`.easing(fn)`, `.on_complete(fn)`
Control	`.reset(tick)`
Sample	`.value(tick) -> f64`
Done	`.is_done() -> bool`

Spring


Constructor	`Spring::new(initial, stiffness, damping)`
Builder	`.on_settle(fn)`
Control	`.set_target(value)`, `.tick()`
Sample	`.value() -> f64`
Done	`.is_settled() -> bool`

Keyframes


Constructor	`Keyframes::new(duration_ticks)`
Builder	`.stop(pos, val)`, `.easing(fn)`, `.segment_easing(idx, fn)`, `.loop_mode(mode)`, `.on_complete(fn)`
Control	`.reset(tick)`
Sample	`.value(tick) -> f64`
Done	`.is_done() -> bool`

Sequence


Constructor	`Sequence::new()`
Builder	`.then(from, to, ticks, easing)`, `.loop_mode(mode)`, `.on_complete(fn)`
Control	`.reset(tick)`
Sample	`.value(tick) -> f64`
Done	`.is_done() -> bool`

Stagger


Constructor	`Stagger::new(from, to, duration_ticks)`
Builder	`.easing(fn)`, `.delay(ticks)`, `.items(count)`, `.loop_mode(mode)`, `.on_complete(fn)`
Control	`.reset(tick)`
Sample	`.value(tick, item_index) -> f64`
Done	`.is_done() -> bool` (last-sampled item), `.is_all_done(tick, item_count) -> bool` (every item)

Related docs

PATTERNS.md -- common composition patterns
WIDGETS.md -- widget catalog and usage

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Animation

Tick-based model

Animation types

Tween

Spring

Keyframes

Sequence

Stagger

Easing functions

LoopMode

Common patterns

Fade-in on mount

Button hover spring

Staggered list entry

Loading sequence (multi-phase)

Chained transitions

API quick reference

Tween

Spring

Keyframes

Sequence

Stagger

Related docs

FilesExpand file tree

ANIMATION.md

Latest commit

History

ANIMATION.md

File metadata and controls

Animation

Tick-based model

Animation types

Tween

Spring

Keyframes

Sequence

Stagger

Easing functions

LoopMode

Common patterns

Fade-in on mount

Button hover spring

Staggered list entry

Loading sequence (multi-phase)

Chained transitions

API quick reference

Tween

Spring

Keyframes

Sequence

Stagger

Related docs