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');
}