Installation
Install move.gl via npm:
npm install move.gl
Import in SCSS
Import move.gl in your main SCSS file:
// Import everything
@use "move.gl" as *;
// Or import specific modules
@use "move.gl/mixins/animations" as animations;
@use "move.gl/mixins/transitions" as transitions;
Basic Usage
Use the animation mixins in your styles:
// Fade animations
.fade-element {
@include fade-in;
}
.fade-out-element {
@include fade-out($duration: 0.3s);
}
// Slide animations
.slide-up {
@include slide-up($duration: 0.5s, $distance: 20px);
}
.slide-down {
@include slide-down;
}
// Bounce animations
.bouncy {
@include bounce($duration: 1s);
}
// Custom timing
.custom {
@include fade-in($duration: 0.8s, $timing: ease-out, $delay: 0.2s);
}
Utility Classes
Use utility classes directly in your HTML:
<!-- Fade animations -->
<div class="animate-fade-in">Fades in</div>
<div class="animate-fade-out">Fades out</div>
<!-- Slide animations -->
<div class="animate-slide-up">Slides up</div>
<div class="animate-slide-down">Slides down</div>
<div class="animate-slide-left">Slides left</div>
<div class="animate-slide-right">Slides right</div>
<!-- Bounce animations -->
<div class="animate-bounce">Bounces</div>
<!-- Zoom animations -->
<div class="animate-zoom-in">Zooms in</div>
<div class="animate-zoom-out">Zooms out</div>
<!-- Flip animations -->
<div class="animate-flip-x">Flips on X axis</div>
<div class="animate-flip-y">Flips on Y axis</div>
Animation Delays
Add delays to stagger animations:
<div class="animate-fade-in delay-100">Delay 100ms</div>
<div class="animate-fade-in delay-200">Delay 200ms</div>
<div class="animate-fade-in delay-300">Delay 300ms</div>
<div class="animate-fade-in delay-500">Delay 500ms</div>