Features
⟳
Keyframe Animations
Pre-built keyframe animations for fade, slide, bounce, zoom, flip, and more. Ready to use out of the box.
↔
Transitions
Smooth state transitions with customizable timing functions and durations.
◇
Transforms
2D and 3D transform utilities for rotation, scaling, skewing, and translation.
⊚
Loaders
Animated loading indicators: spinners, dots, bars, and custom patterns.
♿
Accessibility
Respects prefers-reduced-motion for users who prefer minimal animations.
⚡
Performance
GPU-accelerated animations using transform and opacity for 60fps smoothness.
Quick Start
// Install via npm
npm install move.gl
// Import in your SCSS
@use "move.gl" as *;
// Use animation mixins
.element {
@include fade-in;
}
.card {
@include slide-up($duration: 0.5s);
}
// Or use utility classes directly
<div class="animate-fade-in">...</div>
<div class="animate-bounce">...</div>
Full Installation Guide →
Animation Showcase
Documentation
Learn
Overview
Animations
Effects
Accessibility First
move.gl automatically respects the prefers-reduced-motion media query. Users who prefer reduced
motion will see static or minimal animations instead.
// Built-in reduced motion support
@media (prefers-reduced-motion: reduce) {
.animate-* {
animation: none;
transition: none;
}
}
// Or use the accessibility mixin
.element {
@include motion-safe {
@include fade-in;
}
}