https://github.com/oddbird/accoutrement-animate
tools for managing animations and transitions
https://github.com/oddbird/accoutrement-animate
Last synced: about 1 year ago
JSON representation
tools for managing animations and transitions
- Host: GitHub
- URL: https://github.com/oddbird/accoutrement-animate
- Owner: oddbird
- License: mit
- Created: 2018-06-11T20:24:34.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-22T20:11:50.000Z (about 8 years ago)
- Last Synced: 2024-10-29T18:48:42.683Z (over 1 year ago)
- Language: CSS
- Size: 209 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Accoutrement-Animate
====================
**Sass animation/transition management by [OddBird][oddbird]…**
- Organize all your timing, easing, and transitions into maps
- Document relationships directly in the code
[oddbird]: http://oddbird.net/
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][Herman],
our automated living pattern-library generator
built on [SassDoc][SassDoc].
[Herman]: http://oddbird.net/herman/
[SassDoc]: http://sassdoc.com/
**Other Accoutrement include…**
- [Color](http://oddbird.net/accoutrement-color/)
provides color-palette management and contrast-ratio utilities.
- [Init](http://oddbird.net/accoutrement-init/)
provides lightweight browser-normalization.
- [Scale](http://oddbird.net/accoutrement-scale/)
helps manage scale patterns like font-sizes, margins, and gutters.
- [Type](http://oddbird.net/accoutrement-type/)
provides webfont management tools,
and other typography helpers.
- [Layout](http://oddbird.net/accoutrement-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:
```bash
npm install accoutrement-animate
yarn add accoutrement-animate
```
Import the library:
```scss
@import '/accoutrement-animate/sass/animate';
```
Establish your timing and easing palettes:
```scss
$times: (
'fast': 150ms,
'medium': 'fast' ('times': 2),
);
```
Access your timing & easing from anywhere:
```scss
.example {
transition-duration: time('fast');
}
```