call `animation.cmd()` on your value and let your lustre `update()` return it.
This will cause a dispatch on the next JS animation frame, unless all animations have finished (and
auto-removed).
update the animations with the new time.
evaluate for each animation you are interested in.
e.g. like this:
import lustre/animation as a
pub type Msg {
Trigger
Tick(Float)
}
pub fn update(model: Model, msg: Msg) {
let m = case msg of {
Trigger -> {
let new_anim = a.add(model.animations, "id", 1.0, 2.0, 0.250)
Model(1.0, animations: new_anim)
}
Tick(t) -> {
let new_anim = a.tick(model.animations, t)
let new_value = a.value(new_anim, "id", model.value)
Model(new_value, new_anim)
}
}
#(m, animation.cmd(m.animations, Tick))
}
In the above type Model, init and render have been omitted.
Examples
Below are two working examples, of which the code is in the git repository.
1. Two independent animations
Click on the four buttons to manipulate the text horizontally,
and vertically.
See ./test/example_move_around.gleam
Lustre Animation Example
Please wait for the JavaScript (compiled Gleam) to take over.
2. Many animations that are all 'the same'
Each drop behaves in the same way. Click in the area to generate them.
See ./test/example_drops.gleam
Lustre Animation Example
Please wait for the JavaScript (compiled Gleam) to take over.