Accoutrement 1.0.1

QuickStart: Animate

Tools for managing animatoins & transitions.

  • Organize all your timing, easing, and transitions into maps
  • Document relationships directly in the code

Import

If you already imported accoutrement/sass/tools you are ready to go. If you want to import individual plugins, make sure you first import the shared core:

  @import '<path-to>/accoutrement/sass/core';
  @import '<path-to>/accoutrement/sass/plugin/animate';

If you’re using Eyeglass, you can leave off most of the path:

  @import 'accoutrement/core';
  @import 'accoutrement/plugin/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');
}

Related

@function time()

@function ease()

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

Related

@function change()

@mixin animate()

@mixin transition()