Scenery
Scenery is an animation library of sorts. It’s not for defining your animations, rather it’s for coordinating CSS-defined animations. Scenery will infer the timing of each "act" in your animation from the transition-duration
and transition-delay
properties you’ve written in your CSS.
Usage
Scenery has a simple chainable API for constructing stages of animation. Given this HTML/CSS:
You can trigger the moves between "acts" thusly:
var stage = document;var s = stage;var { console; } // Build up an animation queues; // Start the animation queues;
Scenery will figure out which element has the longest transition duration/delay length and progressively trigger the each "act" as the longest element fires its transitionend
event.
You can pass a set of nodes in to the instance if you want to coordinate animations across different elements:
var actors = document;var s = actors;var { console; } // Build up an animation queues; // Start the animation queues;
And you can add an act/callback/delay to the queue any time you want:
var { s;}; // Build up the animation queues; // Start the animation queues;
API
var stage = document;var s = stage; // Register an "act" by passing a string of the CSS class name you’d like// to applys; // Add a callback to the animation queues; // Add a delay (in millisecond) to the animation queues; // Start the animation queues; // Specify the animation as a loops; // Stop the animation at the _end_ of the current queue items; // Set a specific duration for an "act" in milliseconds. This won’t be// affected by `transition-duration` or `transition-delay` properties.s; // Tell Scenery to only watch for end-scene-callbacks on a specific selector.s;
Limitations
Scenery uses the Arrival helper to determine when an act has finished, so all its limitations apply to Scenery as well.
TODO
- Remove acts from the queue.
Building
You’ll need to:
npm install
Then you can:
npm run build
npm run build-min
npm run build-dist # Runs the two above commands
License
The MIT License (MIT)
Copyright (c) 2015, Icelab
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.