Table of Contents

• Intro
• Features
• Install
• Usage
• Examples
• API
• Development

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