accoutrement-animate

Accoutrement-Animate

Sass animation/transition management by OddBird…

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

OddBird's Accoutrement toolkits are designed around the idea that code should be meaningful to both humans and machines – opening the door for automation, while improving or maintaining readability. These tools integrate with Herman, our automated living pattern-library generator built on SassDoc.

Other Accoutrement include…

• Color provides color-palette management and contrast-ratio utilities.
• Init provides lightweight browser-normalization.
• Scale helps manage scale patterns like font-sizes, margins, and gutters.
• Type provides webfont management tools, and other typography helpers.
• Layout provides layout utilities such as box-sizing, intrinsic ratios, z-index management, named media-queries, and a clearfix.

Quick Start: Animation

Install the package with npm or yarn:

npm install accoutrement-animate
yarn add accoutrement-animate

Import the library:

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

Establish your timing and easing palettes:

$times: (
  'fast': 150ms,
  'medium': 'fast' ('times': 2),
);

Access your timing & easing from anywhere:

.example {
  transition-duration: time('fast');
}