Leptos Motion

A comprehensive animation library for Leptos with Framer Motion-inspired API.

Features

• Declarative animations with Motion-style API
• Hardware acceleration via Web Animations API with RAF fallback
• Gesture support for drag, hover, tap, and more
• Layout animations using FLIP technique
• Scroll animations with intersection observers
• Type safety with full Rust compile-time validation
• High performance targeting 60fps for 100+ concurrent animations
• Animation presets for common patterns
• Keyframe animations for complex multi-step animations
• Variants for named animation states

Quick Start

use leptos::*;
use leptos_motion::*;

#[component]
fn App() -> impl IntoView {
    view! {
        <MotionDiv
            class="my-element".to_string()
            initial=motion_target!(
                "opacity" => AnimationValue::Number(0.0),
                "scale" => AnimationValue::Number(0.5)
            )
            animate=motion_target!(
                "opacity" => AnimationValue::Number(1.0),
                "scale" => AnimationValue::Number(1.0)
            )
            transition=Transition {
                duration: Some(0.5),
                ease: Easing::EaseOut,
                ..Default::default()
            }
        >
            "Hello Leptos Motion!"
        </MotionDiv>
    }
}

Core Concepts

Animation Values

Animation values represent different types of animatable properties:

use leptos_motion::*;

let opacity = AnimationValue::Number(1.0);
let position = AnimationValue::Pixels(100.0);
let rotation = AnimationValue::Degrees(45.0);
let color = AnimationValue::Color("#ff0000".to_string());

Transitions

Configure how animations behave:

# use leptos_motion::*;
// Spring animation
let spring = Transition {
    ease: Easing::Spring(SpringConfig {
        stiffness: 100.0,
        damping: 10.0,
        mass: 1.0,
        ..Default::default()
    }),
    ..Default::default()
};

// Tween animation
let tween = Transition {
    duration: Some(0.3),
    ease: Easing::EaseInOut,
    delay: Some(0.1),
    ..Default::default()
};

Gestures

Add interactivity to your animations:

# use leptos::*;
# use leptos_motion::*;
# fn main() {
let _view = view! {
    <MotionDiv
        while_hover=motion_target!("scale" => AnimationValue::Number(1.1))
        while_tap=motion_target!("scale" => AnimationValue::Number(0.9))
        drag=DragConfig::new().axis(DragAxis::Both)
    >
        "Interactive element"
    </MotionDiv>
};
# }