[!CAUTION] This library is under heavy development! It is not ready to use. Proceed at your own risk.

Dioxus Motion 🚀

A lightweight, cross-platform animation library for Dioxus, designed to bring smooth, flexible animations to your Rust web, desktop, and mobile applications.

✨ Features

• Cross-Platform Support: Works on web (WASM), desktop, and mobile
• Flexible Animation Configuration
• Custom Easing Functions
• Modular Feature Setup
• Simple, Intuitive API

🛠 Installation

Add to your Cargo.toml:

[dependencies]
dioxus-motion = { 
    git = "https://github.com/wheregmis/dioxus-motion.git", 
    branch = "main", 
    optional = true 
}

[features]
default = ["web"]
web = ["dioxus/web", "dioxus-motion/wasm"]
desktop = ["dioxus/desktop", "dioxus-motion/desktop"]
mobile = ["dioxus/mobile", "dioxus-motion/desktop"]

🌐 Platform Support

Choose the right feature for your platform:

• web: For web applications using WASM
• desktop: For desktop and mobile applications
• default: Web support (if no feature specified)

🚀 Quick Start

Basic Animation

use dioxus::prelude::*;
use dioxus_motion::{Motion, use_value_animation};
use instant::Duration;

fn ValueAnimation() -> Element {
    let mut motion = use_value_animation(
        Motion::new(0.0)
            .to(100.0)
            .duration(Duration::from_secs(2))
    );

    rsx! {
        div {
            "Value: {motion.value()}",
            button { onclick: move |_| motion.start(), "Animate" }
        }
    }
}

Transform Animation with Spring

use dioxus::prelude::*;
use dioxus_motion::{Transform, use_transform_animation};

fn TransformAnimation() -> Element {
    let mut transform = use_transform_animation(
        Transform::default(),
        Transform {
            x: 100.0,
            y: 50.0,
            scale: 1.5,
            rotate: 360.0,
            opacity: 0.8,
        },
        AnimationMode::Spring(Spring {
            stiffness: 100.0,
            damping: 10.0,
            mass: 1.0,
            velocity: 0.0,
        }),
    );

    rsx! {
        div {
            style: "{transform.style()}",
            onmounted: move |_| transform.loop_animation(),
            "Animated Content"
        }
    }
}

Advanced Value Animation

use dioxus::prelude::*;
use dioxus_motion::prelude::*;

fn AdvancedValueAnimation() -> Element {
    let mut motion = use_value_animation(
        Motion::new(0.0)
            .to(100.0)
            .duration(Duration::from_secs(1))
            .spring(Spring {
                stiffness: 100.0,
                damping: 10.0,
                mass: 1.0,
                velocity: 0.0,
            })
            .on_complete(|| println!("Animation complete!"))
    );

    use_effect(move || {
        motion.loop_animation();
    });

    rsx! {
        div {
            "Value: {motion.value()}",
            button { onclick: move |_| motion.stop_loop(), "Stop" }
        }
    }
}

Advanced Transform Animation

use dioxus::prelude::*;
use dioxus_motion::{Transform, use_transform_animation};

fn AdvancedTransformAnimation() -> Element {
    let mut transform = use_transform_animation(
        Transform::default(),
        Transform {
            x: 200.0,
            y: 100.0,
            scale: 2.0,
            rotate: 720.0,
            opacity: 0.5,
        },
        AnimationMode::Tween(Tween {
            duration: Duration::from_secs(2),
            easing: easer::functions::Bounce::ease_out,
        }),
    );

    rsx! {
        div {
            style: "{transform.style()}",
            onmounted: move |_| transform.start(),
            onmouseenter: move |_| transform.reverse(),
            onmouseleave: move |_| transform.start(),
            "Interactive Animation"
        }
    }
}

🛠 Configuration Options

🎮 Value Animation Methods

Core Methods

• 🎯 .to(value: f32) - Set target animation value
• ⏱️ .duration(Duration) - Set animation duration
• 🌊 .spring(Spring) - Configure spring physics
• ✨ .on_complete(fn) - Add completion callback

Control Methods

• ▶️ .start() - Start the animation
• ⏸️ .stop() - Pause the animation
• 🔄 .reset() - Reset to initial state
• 🔁 .loop_animation() - Start continuous loop
• ⏹️ .stop_loop() - Stop loop animation

🎨 Transform Animation Methods

Properties

• 📍 .x() - Get horizontal position
• 📐 .y() - Get vertical position
• 🔍 .scale() - Get scale factor
• 🔄 .rotate() - Get rotation angle
• 👻 .opacity() - Get opacity value

Control Methods

• ▶️ .start() - Start transform animation
• ⏸️ .stop() - Stop transform animation
• 🔄 .reset() - Reset to initial transform
• ⏮️ .reverse() - Reverse animation direction
• 🔁 .loop_animation() - Start continuous loop
• ⏹️ .stop_loop() - Stop loop animation
• 🎨 .style() - Get current CSS transform string

🌈 Supported Easing Functions

Leverages the easer crate, supporting:

• Linear
• Quadratic
• Cubic
• Quartic
• And more!

💻 Example Project Configurations

Web Project

[dependencies]
dioxus = "0.4"
dioxus-motion = { 
    git = "https://github.com/wheregmis/dioxus-motion.git", 
    features = ["web"] 
}

Desktop and Mobile Project

[dependencies]
dioxus = "0.6.1"
dioxus-motion = { 
    git = "https://github.com/wheregmis/dioxus-motion.git", 
    features = ["desktop"] 
}

🤝 Contributing

1. Fork the repository
2. Create your feature branch
3. Commit changes
4. Push to the branch
5. Create a Pull Request

📄 License

MIT License

🐞 Reporting Issues

Please report issues on the GitHub repository with:

• Detailed description
• Minimal reproducible example
• Platform and feature configuration used

🌟 Motivation

Bringing elegant, performant motion animations to Rust's web and desktop ecosystems with minimal complexity.