Dynamica

Goddess of animations

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