Dioxus Motion

The AnimatePresence component manages the lifecycle of its children, allowing them to perform exit animations before being removed from the DOM. It supports three distinct modes that change how children are handled during removal:

• PresenceMode::Sync: The default mode. Exiting children keep their measured layout slot for the duration of their exit animation, allowing surrounding layout to close smoothly after the animation completes.
• PresenceMode::Wait: Used when you want to ensure an exiting child has finished its animation before the next element enters or the component unmounts.
• PresenceMode::PopLayout: Removes the exiting child from the normal document flow immediately (effectively using absolute positioning) so that siblings can reflow to their new positions instantly. This prevents the 'jumping' effect during exit animations. On web, this relies on DOM measurement.

To manage presence state within a component, you can use the use_is_present or use_presence hooks.

To animate custom data structures, implement the Animatable trait. Your type must also implement Copy, Default, and the standard arithmetic operator traits: Add, Sub, and Mul<f32>.

Required Methods:

• interpolate(&self, target: &Self, t: f32) -> Self: Defines how to transition between two values at time t (0.0 to 1.0).
• magnitude(&self) -> f32: Returns the magnitude of the value (e.g., the length of a vector).

Best Practices:

• Circular Values (Angles): In interpolate, ensure you calculate the shortest path between angles to avoid spinning the long way around.
• Normalized Values (Colors): Use .clamp(0.0, 1.0) in your scaling logic to keep values within valid bounds.
• Precision: You can override the default epsilon (0.01) using .with_epsilon().

#[derive(Debug, Copy, Clone, PartialEq, Default)]
struct Position {
    x: f32,
    y: f32,
}

// 1. Implement standard operators
impl std::ops::Add for Position {
    type Output = Self;
    fn add(self, other: Self) -> Self { Self { x: self.x + other.x, y: self.y + other.y } }
}

impl std::ops::Sub for Position {
    type Output = Self;
    fn sub(self, other: Self) -> Self { Self { x: self.x - other.x, y: self.y - other.y } }
}

impl std::ops::Mul<f32> for Position {
    type Output = Self;
    fn mul(self, factor: f32) -> Self { Self { x: self.x * factor, y: self.y * factor } }
}

// 2. Implement Animatable
impl Animatable for Position {
    fn interpolate(&self, target: &Self, t: f32) -> Self {
        *self + (*target - *self) * t
    }
    
    fn magnitude(&self) -> f32 {
        (self.x * self.x + self.y * self.y).sqrt()
    }
}

In recent versions, use_motion<T> requires that the type T implements Send + 'static.

• Standard types: f32, Transform, and Color already satisfy these bounds.
• Custom types: Ensure all fields are Send + 'static. If you need shared ownership, use Arc<T> instead of Rc<T>.
• Sharing handles: To share a single motion handle across multiple components, wrap the result of use_motion in an Arc (e.g., let shared_handle = Arc::new(use_motion(0.0f32));).

// ❌ This won't compile - Rc<T> is not Send
// let bad_motion = use_motion(std::rc::Rc::new(0.0f32));

// ✅ Use Arc<T> instead for shared ownership
#[derive(Copy, Clone, Default)]
struct SharedValue { value: f32 }

// ... implement Add, Sub, Mul, and Animatable for SharedValue ...

let shared_motion = use_motion(SharedValue { value: 0.0 });

// ✅ Alternative: Use Arc to share the motion handle itself
let shared_motion_handle = std::sync::Arc::new(use_motion(0.0f32));
let motion_clone = shared_motion_handle.clone();

You can implement smooth route transitions by using the MotionTransitions derive macro on your Routable enum and replacing the standard Outlet with AnimatedOutlet.

1. Derive MotionTransitions on your Route enum.
2. Use the #[transition(Effect)] attribute on specific routes to define their animation style (e.g., Fade, ZoomIn, SlideLeft).
3. In your layout component, replace Outlet::<Route> {} with AnimatedOutlet::<Route> {}.

use dioxus_motion::prelude::*;

#[derive(Routable, Clone, Debug, PartialEq, MotionTransitions)]
#[rustfmt::skip]
enum Route {
    #[layout(NavBar)]
        #[route("/")]
        #[transition(Fade)]
        Home {},
        #[route("/slide-left")]
        #[transition(ZoomIn)]
        SlideLeft {},
        // ... other routes
    #[end_layout]
    #[route("/:..route")]
    PageNotFound { route: Vec<String> },
}

#[component]
fn NavBar() -> Element {
    rsx! {
        nav {
            Link { to: Route::Home {}, "Home" }
            Link { to: Route::SlideLeft {}, "Blog" }
        }
        AnimatedOutlet::<Route> {}
    }
}

If you are not using the high-level PresenceMotion component and instead want to manually control an exit animation using use_motion, you must use use_presence_motion_completion to ensure the AnimatePresence parent doesn't remove the component before the animation finishes.

This is necessary because direct Dioxus callbacks are not Send + 'static, and this helper acts as a presence-safe adapter for raw use_motion exits.

Workflow:

1. Use use_presence() to detect if the component is being removed (!presence.is_present).
2. Trigger your exit animation (e.g., opacity.animate_to(0.0, ...)).
3. Pass the motion handle and the exit trigger state to use_presence_motion_completion.

#[component]
fn Toast(message: String) -> Element {
    let presence = use_presence();
    let mut opacity = use_motion(1.0);
    let mut exit_started = use_signal(|| false);

    use_effect(move || {
        if !presence.is_present {
            exit_started.set(true);
            opacity.animate_to(
                0.0,
                AnimationConfig::new(AnimationMode::Tween(Tween::default())),
            );
        }
    });
    use_presence_motion_completion(opacity, exit_started());

    rsx! {
        div {
            style: "opacity: {opacity.get_value()}",
            "{message}"
        }
    }
}