Docs | Demo

Create derived signals that are animated versions of the original signal

use leptos::*;
use leptos_animation::*;

#[component]
pub fn Counter() -> impl IntoView {
    AnimationContext::provide();

    let (value, set_value) = create_signal(0.0);

    let animated_value = create_animated_signal(move || value.get().into(), tween_default);

    let clear = move |_| set_value.set(0.0);
    let decrement = move |_| set_value.update(|value| *value -= 1.0);
    let increment = move |_| set_value.update(|value| *value += 1.0);

    view! {
        <main class="simple">
            <button on:click=clear>"Clear"</button>
            <button on:click=decrement>"-1"</button>
            <button on:click=increment>"+1"</button>
            <div>"Value: " {value} <br/> "Animated value: " {animated_value}</div>
        </main>
    }
}

Features

Allows for multiple animations playing simultaneously
Efficiently calls window.request_animation_frame(): only when there are animations playing and only once per frame even if there are multiple animated signals running.
Allows for custom durations, easing functions, target updates and tween methods. Can be made to work for any type.
Animated signals are all updated simultaneously per frame. Effects that use multiple animated signals are called only once per frame.

leptos_animation 0.5.2

Features