https://github.com/cloud-shuttle/leptos-motion
🎬 Production-ready animation library for Leptos with complete Motion Studio, WebGL acceleration, and Framer Motion-inspired API. Built with Rust & WebAssembly for 60fps animations, 3D transforms, path morphing, and spring physics. v0.8.3 with comprehensive ADRs, pnpm support, and near-100% test coverage.
https://github.com/cloud-shuttle/leptos-motion
Last synced: 5 months ago
JSON representation
🎬 Production-ready animation library for Leptos with complete Motion Studio, WebGL acceleration, and Framer Motion-inspired API. Built with Rust & WebAssembly for 60fps animations, 3D transforms, path morphing, and spring physics. v0.8.3 with comprehensive ADRs, pnpm support, and near-100% test coverage.
- Host: GitHub
- URL: https://github.com/cloud-shuttle/leptos-motion
- Owner: cloud-shuttle
- License: mit
- Created: 2025-08-30T13:41:01.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-10-06T13:03:24.000Z (9 months ago)
- Last Synced: 2025-12-08T16:26:18.725Z (7 months ago)
- Language: HTML
- Size: 249 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Roadmap: docs/roadmaps/IMPLEMENTATION_ROADMAP.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Leptos Motion 🎬
[](https://crates.io/crates/leptos-motion)
[](https://docs.rs/leptos-motion)
[](https://opensource.org/licenses/MIT)
[](https://www.rust-lang.org)
**High-performance animation library for [Leptos](https://github.com/leptos-rs/leptos) with Framer Motion-inspired API**
Leptos Motion brings smooth, performant animations to your Leptos applications with a familiar API that feels like home for React developers. Built with Rust and WebAssembly for maximum performance.
> **🚀 Stable Release Ready!** Version 0.3.0 is ready for production use.
## 🎉 Stable Release Status
**Version 0.3.0** is now available for production use!
- ✅ **Solid Foundation**: Core animation engine, gestures, layout animations
- ✅ **Comprehensive Testing**: 100+ tests passing with full coverage
- ✅ **Type Safety**: Full Rust compile-time guarantees
- ✅ **Simplified APIs**: Clean, user-friendly interfaces
- ✅ **All Examples Working**: Advanced features, mobile app, dashboard, e-commerce
- ✅ **API Compatibility**: Consistent and stable API across all components
- ✅ **Production Ready**: Optimized for real-world applications
> **Note**: This is a stable release ready for production use.
## ✨ Features
- 🚀 **High Performance**: Built with Rust and WebAssembly for 60fps animations
- 🎯 **Framer Motion Inspired**: Familiar API for React developers
- 🎨 **Rich Animation Types**: Spring, tween, and custom easing functions
- 🖱️ **Gesture Support**: Multi-touch, drag, hover, tap, and scroll animations
- 📱 **Layout Animations**: FLIP-based smooth transitions when elements change position
- 🎭 **Presence Animations**: Enter/exit animations with automatic cleanup
- 🔧 **Type Safe**: Full Rust type safety and compile-time guarantees
- 🌐 **Cross Platform**: Works in browsers and server-side rendering
## 📦 Installation
Add to your `Cargo.toml`:
```toml
[dependencies]
leptos-motion = "0.3.0"
```
## 🚀 Quick Start
### Basic Animation
```rust
use leptos::*;
use leptos_motion::*;
#[component]
pub fn AnimatedButton() -> impl IntoView {
view! {
AnimationValue::Number(1.0)
)
while_hover=motion_target!(
"scale" => AnimationValue::Number(1.1)
)
transition=Transition {
duration: Some(0.2),
ease: Easing::EaseOut,
..Default::default()
}
>
"Hover me!"
}
}
```
### Spring Animation
```rust
use leptos::*;
use leptos_motion::*;
#[component]
pub fn SpringBox() -> impl IntoView {
let (is_open, set_is_open) = signal(false);
view! {
AnimationValue::Pixels(if is_open.get() { 300.0 } else { 100.0 }),
"height" => AnimationValue::Pixels(if is_open.get() { 200.0 } else { 100.0 })
)
transition=Transition {
duration: Some(0.6),
ease: Easing::Spring(SpringConfig::default()
.stiffness(100.0)
.damping(10.0)
),
..Default::default()
}
/>
"Toggle Size"
}
}
```
### Gesture Animations
```rust
use leptos::*;
use leptos_motion::*;
#[component]
pub fn DraggableCard() -> impl IntoView {
view! {
AnimationValue::Number(1.05)
)
drag_constraints=DragConstraints {
left: Some(-100.0),
right: Some(100.0),
top: Some(-100.0),
bottom: Some(100.0),
}
>
"Draggable Card"
"Drag me around!"
}
}
```
### Layout Animations
```rust
use leptos::*;
use leptos_motion::*;
#[component]
pub fn AnimatedList() -> impl IntoView {
let (items, set_items) = signal(vec![1, 2, 3, 4, 5]);
let add_item = move |_| {
set_items.update(|items| {
let new_id = items.len() + 1;
items.push(new_id);
});
};
let remove_item = move |id| {
set_items.update(|items| {
items.retain(|&x| x != id);
});
};
view! {
"Add Item"
AnimationValue::Number(0.0),
"x" => AnimationValue::Pixels(-20.0)
)
animate=motion_target!(
"opacity" => AnimationValue::Number(1.0),
"x" => AnimationValue::Pixels(0.0)
)
exit=motion_target!(
"opacity" => AnimationValue::Number(0.0),
"x" => AnimationValue::Pixels(20.0)
)
transition=Transition {
duration: Some(0.3),
ease: Easing::EaseOut,
..Default::default()
}
>
"Item {id}"
"Remove"
}
}
/>
}
}
```
## 🎨 Animation Types
### Spring Animations
Natural, physics-based animations that feel organic and responsive:
```rust
AnimationValue::Number(1.2)
)
transition=Transition {
duration: Some(0.6),
ease: Easing::Spring(SpringConfig::default()
.stiffness(100.0) // Higher = faster
.damping(10.0) // Lower = more bouncy
.mass(1.0) // Higher = more inertia
),
..Default::default()
}
>
"Spring Animation"
```
### Tween Animations
Smooth, controlled animations with custom easing:
```rust
AnimationValue::Number(0.5)
)
transition=Transition {
duration: Some(0.5),
ease: Easing::EaseInOut,
..Default::default()
}
>
"Tween Animation"
```
### Custom Easing
Use built-in easing functions or create custom ones:
```rust
AnimationValue::Pixels(100.0)
)
transition=Transition {
duration: Some(0.8),
ease: Easing::EaseOut,
..Default::default()
}
>
"Custom Easing"
```
## 🖱️ Gesture Support
### Drag Gestures
```rust
AnimationValue::Number(1.05)
)
>
"Draggable content"
```
### Hover Gestures
```rust
AnimationValue::Number(1.05)
)
transition=Transition {
duration: Some(0.2),
ease: Easing::EaseOut,
..Default::default()
}
>
"Hover me!"
```
### Tap Gestures
```rust
AnimationValue::Number(0.95)
)
transition=Transition {
duration: Some(0.1),
ease: Easing::EaseOut,
..Default::default()
}
>
"Tap me!"
```
## 📱 Layout Animations
Automatically animate layout changes with the `layout` prop:
```rust
{item.content}
}
}
/>
```
## 🎭 Presence Animations
Handle enter/exit animations automatically:
```rust
{move || if show_modal() {
Some(view! {
AnimationValue::Number(0.0),
"scale" => AnimationValue::Number(0.8)
)
animate=motion_target!(
"opacity" => AnimationValue::Number(1.0),
"scale" => AnimationValue::Number(1.0)
)
exit=motion_target!(
"opacity" => AnimationValue::Number(0.0),
"scale" => AnimationValue::Number(0.8)
)
transition=Transition {
duration: Some(0.3),
ease: Easing::EaseOut,
..Default::default()
}
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center".to_string()
>
"Modal content"
})
} else {
None
}}
```
## 🔧 Advanced Usage
### Animation Presets
Use built-in animation presets for common patterns:
```rust
use leptos_motion_core::AnimationPresets;
"Fade In Animation"
```
### Keyframe Animations
Create complex multi-step animations:
```rust
use leptos_motion_core::animation::Keyframes;
let keyframes = Keyframes::new()
.add_keyframe(0.0, motion_target!("opacity" => AnimationValue::Number(0.0)))
.add_keyframe(0.5, motion_target!("opacity" => AnimationValue::Number(0.5)))
.add_keyframe(1.0, motion_target!("opacity" => AnimationValue::Number(1.0)));
"Keyframe Animation"
```
### Performance Optimization
```rust
// Use layout animations for smooth position changes
"Layout Animation"
// Use appropriate easing for performance
"Hardware Accelerated"
```
## 🚀 Performance Features
- **WebAssembly**: Rust compiled to WASM for near-native performance
- **GPU Acceleration**: Automatic hardware acceleration when available
- **Frame Throttling**: Built-in 60fps limiting for smooth animations
- **Memory Management**: Efficient memory usage with automatic cleanup
- **Tree Shaking**: Only include the features you use
## 🌐 Browser Support
- **Modern Browsers**: Chrome 67+, Firefox 60+, Safari 11.1+, Edge 79+
- **WebAssembly**: Full WASM support required
- **CSS Grid/Flexbox**: For layout animations
- **Touch Events**: For mobile gesture support
## 📚 Documentation
- [API Reference](https://docs.rs/leptos-motion)
- [Examples](https://github.com/cloud-shuttle/leptos-motion/tree/main/examples)
- [Migration Guide](https://github.com/cloud-shuttle/leptos-motion/blob/main/docs/migration/framer-motion.md)
## 🤝 Contributing
We welcome contributions! Please see our [Contributing Guide](https://github.com/cloud-shuttle/leptos-motion/blob/main/CONTRIBUTING.md) for details.
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](https://github.com/cloud-shuttle/leptos-motion/blob/main/LICENSE) file for details.
## 🙏 Acknowledgments
- Inspired by [Framer Motion](https://www.framer.com/motion/)
- Built with [Leptos](https://github.com/leptos-rs/leptos)
- Powered by Rust and WebAssembly
---
**Made with ❤️ by the Leptos Motion team**
[GitHub](https://github.com/cloud-shuttle/leptos-motion) • [Issues](https://github.com/cloud-shuttle/leptos-motion/issues) • [Discussions](https://github.com/cloud-shuttle/leptos-motion/discussions)