QuickStart: Animate
Tools for managing animations & transitions.
- Organize all your timing, easing, and transitions into maps
- Document relationships directly in the code
Import
If you’ve already imported accoutrement
you are ready to go.
You can also import the animate module on its own:
@use '<path-to>/accoutrement/sass/animate';
Timing & Easing
Establish your timing and easing palettes, with the standard Accoutrement syntax:
$times: (
'fast': 150ms,
'medium': '#fast' ('times': 2),
);
$easing: (
'elastic': cubic-bezier(0.5, -0.4, 0.5, 1.4),
'fade-in': '#in-out-quad',
);
Access them anywhere:
.example {
animation: slide-in time('fast') ease('in-out-quad') 1 both;
transition-delay: time('fast');
transition-duration: time('medium');
transition-timing-function: ease('elastic');
}
Transitions & Animations
Use your timing and easing patterns to compose reusable “changes” – including transitions and animations:
$changes: (
'slide-in': slide-in time('fast') ease('in-out-quad') 1 both,
'delay-in': '#slide-in' time('medium'),
'fade-ease': time('medium') ease(in),
'fade-colors': (color '#fade-ease', background-color '#fade-ease'),
);
Access them anywhere:
.example {
animation: change('slide-in');
transition: change('fade-colors');
}
Or use the mixin shortcuts:
.example {
@include animate('slide-in');
@include transition('fade-colors');
}