6 releases

0.3.0-alpha.4 Oct 27, 2024
0.3.0-alpha.3 Aug 28, 2024
0.2.1 Jul 29, 2024
0.2.0 Jun 6, 2024
0.1.0 Oct 16, 2023

#1393 in Web programming

Download history 10/week @ 2024-09-14 15/week @ 2024-09-21 16/week @ 2024-09-28 6/week @ 2024-10-05 4/week @ 2024-10-12 1/week @ 2024-10-19 113/week @ 2024-10-26 35/week @ 2024-11-02 2/week @ 2024-11-09 3/week @ 2024-11-16 4/week @ 2024-11-23 20/week @ 2024-12-07 6/week @ 2024-12-14 5/week @ 2024-12-21 40/week @ 2024-12-28

71 downloads per month
Used in 2 crates

MIT/Apache

25KB
302 lines

dioxus-spring

License Crates.io Docs CI

Animation library for Dioxus.

Pairs great with dioxus-use-gesture!

let container_ref = use_mounted();
let rect = use_size(container_ref);

let mut is_big = use_signal(|| false);
let spring = use_spring(
    if is_big() { rect.width() as f32 } else { 0f32 },
    Duration::from_millis(500),
);

let animated_ref = use_mounted();
use_animated(animated_ref, spring, |width| {
    format!(
        r"
        width: {width}px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #27ae60;
    "
    )
});

rsx!(
    div {
        position: "relative",
        width: "200px",
        height: "50px",
        border: "2px solid #eee",
        onmounted: move |event| container_ref.onmounted(event),
        onclick: move |_| is_big.set(!is_big()),
        div { onmounted: move |event| animated_ref.onmounted(event) }
        span {
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: " translate(-50%, -50%)",
            z_index: 9,
            "Click me!"
        }
    }
)

Dependencies

~18–27MB
~414K SLoC