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::*;
use std::collections::HashMap;

#[component]
fn App() -> impl IntoView {
    let mut initial = HashMap::new();
    initial.insert("opacity".to_string(), AnimationValue::Number(0.0));
    initial.insert("scale".to_string(), AnimationValue::Number(0.5));

    let mut animate = HashMap::new();
    animate.insert("opacity".to_string(), AnimationValue::Number(1.0));
    animate.insert("scale".to_string(), AnimationValue::Number(1.0));

    view! {
        <MotionDiv
            class=Some("my-element".to_string())
            initial=Some(initial)
            animate=Some(animate)
            transition=Some(Transition {
                duration: Some(0.5),
                ease: Easing::EaseOut,
                delay: None,
                repeat: RepeatConfig::Never,
                stagger: None,
            })
        >
            "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::*;
# use std::collections::HashMap;
# fn main() {
let mut hover_target = HashMap::new();
hover_target.insert("scale".to_string(), AnimationValue::Number(1.1));

let mut tap_target = HashMap::new();
tap_target.insert("scale".to_string(), AnimationValue::Number(0.9));

let _view = view! {
    <MotionDiv
        while_hover=Some(hover_target)
        while_tap=Some(tap_target)
        drag=Some(DragConfig::default())
    >
        "Interactive element"
    </MotionDiv>
};
# }