Guide Animation

Animation

A unified animation system providing preset animations, easing functions, and orchestration capabilities.

Overview

The animation module provides a comprehensive set of tools for creating smooth, performant UI animations. It builds on top of gpui's Animation and Transition APIs, offering:

• Easing functions: 20+ mathematical easing functions
• Preset animations: Ready-to-use common animation patterns
• Animation configuration: Flexible configuration options
• Orchestration: Sequence and parallel animation playback

Example

use yororen_ui::animation::{
    Animation, AnimationExt, ease_out_quint,
    constants::duration::MENU_OPEN,
};

// Using with gpui's animation system
menu.with_animation(
    "popover-menu",
    Animation::new(MENU_OPEN).with_easing(ease_out_quint()),
    |this, delta| this.opacity(delta),
)

When to use

• Menu/dropdown open/close animations
• Modal dialog transitions
• Loading states (pulse, spin)
• Hover/focus state transitions
• Page/component entrance animations

Not a good fit:

• Complex physics-based animations (use custom implementation)
• Frame-by-frame procedural animations

Modules

Easing Functions

Located in easing.rs, provides mathematical easing functions:

• Linear: ease_linear
• Quadratic: ease_in_quad, ease_out_quad, ease_in_out_quad
• Cubic: ease_in_cubic, ease_out_cubic, ease_in_out_cubic
• Quartic: ease_in_quart, ease_out_quart, ease_in_out_quart
• Quintic: ease_in_quint, ease_out_quint, ease_in_out_quint
• Sine: ease_in_sine, ease_out_sine, ease_in_out_sine
• Exponential: ease_in_expo, ease_out_expo, ease_in_out_expo
• Circular: ease_in_circ, ease_out_circ
• Back (Overshoot): ease_out_back, ease_in_out_back
• Elastic: ease_in_elastic, ease_out_elastic, ease_in_out_elastic
• Bounce: ease_in_bounce, ease_out_bounce, ease_in_out_bounce

Preset Animations

Located in preset.rs, provides ready-to-use animations:

• fade_slide_in(duration) - Fade + slide for menus
• fade_slide_out(duration) - Reverse of fade_slide_in
• pulse(duration) - Loading pulse animation
• fade_slide_in_left(distance) - Slide from left
• fade_slide_in_right(distance) - Slide from right
• fade_slide_in_up(distance) - Slide from top
• fade_slide_in_down(distance) - Slide from bottom

Animation Constants

Located in constants.rs, provides timing constants:

// Menu/Dropdown
duration::MENU_OPEN       // 160ms
duration::MENU_OPEN_FAST  // 100ms
duration::MENU_OPEN_SLOW  // 250ms

// Navigator/Slider
duration::NAVIGATOR_SLIDER // 200ms
duration::TAB_SWITCH       // 150ms

// Loading/Skeleton
duration::SKELETON_PULSE_1  // 1100ms
duration::SKELETON_PULSE_2  // 1200ms

// Progress
duration::PROGRESS_SPINNER  // 850ms
duration::PROGRESS_CIRCLE   // 900ms
duration::PROGRESS_BAR      // 1500ms

// Modal
duration::MODAL_FADE_IN   // 200ms
duration::MODAL_SLIDE_UP  // 250ms

// General
duration::VERY_FAST  // 100ms
duration::FAST      // 150ms
duration::NORMAL    // 200ms
duration::SLOW      // 300ms
duration::VERY_SLOW // 400ms

Orchestration

Located in orchestrator.rs, provides sequencing capabilities:

use yororen_ui::animation::{AnimationSequence, AnimationParallel};

// Sequence: run animations one after another
let sequence = AnimationSequence::new()
    .then(duration::MODAL_FADE_IN)
    .then(duration::MODAL_SLIDE_UP);

// Parallel: run animations simultaneously
let parallel = AnimationParallel::new()
    .with(duration::FAST)
    .with(duration::FAST);

Helper Traits

AnimateExt

Extension trait for animating gpui elements:

use yororen_ui::animation::AnimateExt;

// Fade animation
div.animate_fade("my-id", Duration::from_millis(200), 0.5);

// Slide animation
div.animate_slide("my-id", SlideDirection::Up, px(10.0), Duration::from_millis(200), 0.5);

Best Practices

1. Use preset durations: Stick to the defined constants for consistency
2. Choose appropriate easing:
   • ease_out_* for entrance animations (fast start, smooth end)
   • ease_in_* for exit animations (smooth start, fast end)
   • ease_in_out_* for equal emphasis
3. Keep animations short: Most UI animations should be 100-300ms
4. Consider accessibility: Some users prefer reduced motion

Migration from Legacy Code

If you have existing code using direct animation constants:

// Before
use crate::constants::animation::MENU_OPEN;

// After
use yororen_ui::animation::constants::duration::MENU_OPEN;