Crate leptos_motion

Expand description

§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="my-element".to_string()
            initial=initial
            animate=animate
            transition=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:

// 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:

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=hover_target
        while_tap=tap_target
        drag=DragConfig::default()
    >
        "Interactive element"
    </MotionDiv>
};

Modules§

animation: Core animation types and builders
drag: Drag gesture implementation
easing: Easing functions for smooth animation transitions
external: Re-export commonly used external types
flip: FLIP (First, Last, Invert, Play) animation implementation
gesture_detector: Main gesture detector that coordinates all gesture types
hover: Hover gesture implementation
layout_tracker: Layout tracking and performance monitoring
multi_touch: Multi-touch gesture detection and recognition
presets: Animation presets and common patterns
shared_elements: Shared element transitions for seamless view changes
simplified_gesture_api: Simplified Gesture API
simplified_layout_api: Simplified Layout/Scroll API
spring: Spring physics simulation for natural animations
tap: Tap gesture implementation

Macros§

create_motion_elements: Macro for creating motion elements (placeholder)
motion_target: Macro for creating animation targets

Structs§

AnimationConfig: Complete animation configuration
AnimationHandle: Unique identifier for animation instances
DragConfig: Drag configuration
DragConstraints: Drag constraints for limiting drag movement
FLIPAnimation: FLIP animation instance
FLIPAnimator: FLIP animator for managing layout transitions
FLIPState: FLIP animation state
GestureConfig: Advanced gesture configuration
GestureDetector: Main gesture detector that coordinates all gesture types
GestureResult: Gesture recognition result
LayoutAnimationConfig: Layout animation configuration
LayoutChange: Layout change record
LayoutInfo: Layout information for FLIP animations
LayoutTracker: Layout tracker for monitoring changes
MotionProps: Motion component props
MultiTouchGestureDetector: Multi-touch gesture detector
MultiTouchState: Multi-touch gesture state
ScrollAnimationState: Scroll animation state
ScrollAnimator: Scroll animator
ScrollTrigger: Scroll trigger configuration
SharedElementConfig: Shared element configuration
SharedElementManager: Manager for shared element transitions
SimplifiedAnimationStatus: Simplified animation status
SimplifiedGestureBounds: Simplified gesture bounds
SimplifiedGestureConfig: Simplified gesture configuration
SimplifiedGestureData: Simplified gesture data
SimplifiedGestureDetector: Simplified gesture detector that provides a clean, simple interface
SimplifiedGestureResult: Simplified gesture result
SimplifiedLayoutConfig: Simplified layout configuration
SimplifiedLayoutManager: Simplified layout manager that provides a clean, simple interface
SimplifiedPerformanceMetrics: Simplified performance metrics
SimplifiedVector2D: Simplified 2D vector
SpringConfig: Spring animation configuration
TouchPoint: Touch point information
TransformValues: Transform values for FLIP animations
Transition: Transition configuration

Enums§

AnimationValue: Animation value types that can be animated
DragAxis: Drag axis constraint
Easing: Easing function types
EasingFunction: Easing function for FLIP animations
GestureEvent: Gesture event types
LayoutChangeType: Type of layout change
MultiTouchGestureType: Types of multi-touch gestures
PerformanceImpact: Performance impact of layout change
PresenceMode: Mode for handling presence animations
RepeatConfig: Repeat configuration
ScrollDirection: Scroll direction
SimplifiedEasing: Simplified easing functions
SimplifiedGestureType: Simplified gesture types
ZIndexStrategy: Z-index strategy for shared elements

Constants§

DESCRIPTION: Library information
VERSION: Version information

Traits§

AnimationEngine: Core animation engine trait
GestureHandler: Gesture handler trait for custom gesture implementations

Functions§

AnimatePresence: AnimatePresence component for handling enter/exit animations
MotionDiv: Simple MotionDiv component for animated div elements
MotionSpan: Simple MotionSpan component for animated span elements

Type Aliases§

Result: Result type for animation operations

Derive Macros§

MotionComponent: Derive macro for motion components (placeholder)

Crate leptos_motion

Crate leptos_motion Copy item path

§Leptos Motion

§Features

§Quick Start

§Core Concepts

§Animation Values

§Transitions

§Gestures

Modules§

Macros§

Structs§

Enums§

Constants§

Traits§

Functions§

Type Aliases§

Derive Macros§

Crate leptos_motion