accoutrement-animate

0.1.1 • Public • Published

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.1.1
    13
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.1.1
    13
  • 0.1.0
    0

Package Sidebar

Install

npm i accoutrement-animate

Weekly Downloads

13

Version

0.1.1

License

MIT

Unpacked Size

604 kB

Total Files

35

Last publish

Collaborators

  • mirisuzanne