Dynamica
Goddess of animations
Table of Contents
Intro
Dynamica is a low-level animation engine library, which provides smooth and exact work of any amount of serial or parallel animations with a simple and flexible API
Features
- Designed with performance in mind
- Simple - 175 LOC
- Lightweight - 2.5 KB
- Well tested - 100% code coverage
- Built for any environment - HTML, CSS, Canvas, React, etc...
Install
npm install --save dynamica
or
Download dev or prod version and put it in your html
<script src="vendor/dynamica.min.js"></script>
Usage
// start the animation digest
requestAnimationFrame(function loop (t) {
Animation.animate(t)
requestAnimationFrame(loop)
})
var target = document.getElementById('target')
// create animation instance
var animation = new Animation({
duration: 10 * 1000,
handler: function (t) {
// animation implementation
target.textContent = t.toFixed(5)
}
})
// start the animation
animation.start()
Examples
- All
- Basic number animation
- Basic motion animation
- Custom easing
- Animation queue
- Parallel animations
- Countdown
API
Animation.animate(time)
Execution of all animations by a single call. It guarantees full animations' synchronization. In other words, two (or endlessly more) different animations with the same duration and start time will be completed at the same time. Recommended to use requestAnimationFrame
or raf.
requestAnimationFrame(function loop (t) {
Animation.animate(t)
requestAnimationFrame(loop)
})
Animation#constructor(options)
Options
Name | Description | Default | Required |
---|---|---|---|
duration |
Animation duration. If not passed, error will thrown | + | |
handler |
Animation implementation | (t) => {} |
|
easing |
Animation easing. Check Custom easing example | (t) => t |
|
onstart |
Called by Animation#start()
|
() => {} |
|
oncancel |
Called by Animation#cancel()
|
() => {} |
|
oncomplete |
Called by Animation#complete()
|
() => {} |
Animation#start()
Start an animation. First tick will be executed on the next animation frame. This method calls onstart
callback
Animation#complete()
Immediately completes the animation and starts next animations from the queue. It means that handler
callback will be called with t = 1
. This method calls oncomplete
callback
Animation#cancel()
Immediately cancels the animation. Animations in the queue will not be started. This method calls oncancel
callback
Animation#queue(animation)
Puts animation to the queue. If you put several animations to the queue, all these animations will start at same time with source animation completion. Animation queue example
Animation#dequeue(animation)
Removes passed animations from the queue. Provides full control over animations queues
Animation#started()
Indicates if the animation has been started or not
Development
Command | Description |
---|---|
npm run check |
Check standard code style by snazzy |
npm run test |
Run tests by tape and compute code coverage by nyc |
npm run build |
Wrap source code in UMD by rollup |
npm run min |
Minify code by UglifyJS |