dynamica

1.1.2 • Public • Published

Dynamica

Goddess of animations

NPM version Coverage Status Coverage Status js-standard-style

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

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

Package Sidebar

Install

npm i dynamica

Weekly Downloads

10

Version

1.1.2

License

MIT

Unpacked Size

19.3 kB

Total Files

6

Last publish

Collaborators

  • broadsw0rd