move.gl

Animation Categories

move.gl organizes animations into logical categories:

Keyframes

Pre-defined @keyframes for common animation patterns like fade, slide, bounce, zoom, and flip.

Transitions

Smooth property transitions between states with customizable timing functions.

Transforms

2D and 3D transform utilities for rotation, scaling, skewing, and translation.

Loaders

Animated loading indicators including spinners, dots, bars, and pulse effects.

Timing Functions

Built-in easing functions for natural motion:

// Standard easings
        $ease-linear: linear;
        $ease-in: cubic-bezier(0.4, 0, 1, 1);
        $ease-out: cubic-bezier(0, 0, 0.2, 1);
        $ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

        // Custom spring-like easings
        $ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        $ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

        // Usage
        .element {
        @include fade-in($timing: $ease-bounce);
        }
    

Duration Scale

Consistent duration values for animations:

// Duration scale
        $duration-instant: 75ms; // Nearly instant
        $duration-fast: 150ms; // Quick interactions
        $duration-normal: 300ms; // Default
        $duration-slow: 500ms; // Deliberate motion
        $duration-slower: 700ms; // Dramatic effect
        $duration-slowest: 1000ms; // Very slow
    

Accessibility

move.gl respects user preferences for reduced motion:

// The motion-safe mixin only applies animations when safe
        .element {
        @include motion-safe {
        @include fade-in;
        }
        }

        // Alternative: motion-reduced for fallback styles
        .element {
        @include fade-in;

        @include motion-reduced {
        animation: none;
        opacity: 1;
        }
        }
    

Users with prefers-reduced-motion: reduce set in their system preferences will see static content or minimal transitions.

Performance

move.gl uses GPU-accelerated properties for smooth 60fps animations:

transform — For position, rotation, and scale changes
opacity — For visibility transitions
will-change — Applied automatically for complex animations

// GPU-accelerated animation
        @keyframes slide-up {
        from {
        transform: translateY(20px); // GPU-accelerated
        opacity: 0; // GPU-accelerated
        }
        to {
        transform: translateY(0);
        opacity: 1;
        }
        }

        // Avoid animating these properties (triggers layout):
        // - width, height
        // - margin, padding
        // - top, left, right, bottom
    

Composing Animations

Combine multiple animations for complex effects:

// Combine fade + slide
        .card-enter {
        @include fade-in($duration: 0.5s);
        @include slide-up($duration: 0.5s);
        }

        // Sequential animations with delays
        .stagger-1 { animation-delay: 0ms; }
        .stagger-2 { animation-delay: 100ms; }
        .stagger-3 { animation-delay: 200ms; }
        .stagger-4 { animation-delay: 300ms; }
    