transient

An animation loop implementation

Stats

StarsIssuesVersionUpdatedCreatedSize
transient
602.0.14 years ago7 years agoMinified + gzip package size for transient in KB

Readme

Transient

NPM Version NPM Downloads JavaScript Style Guide

image

A simple and minimal animation loop. Consistent frame rate's are achieved with requestAnimationFrame and high resolution timing. This library is great for simple transition animations, thus the name, but can also be used for complex animations.

Usage:

const Animation = require('transient')
const el = document.getElementById('.my-element')

// Create the animation
var fadeIn = new Animation({
  duration: 1500, // 1.5 seconds
  draw: function (progress) {
    // progress is an integer between 0 and 1
    el.style.opacity = progress;
  }
})

// Start the animation
fadeIn.start()

Options:

  • duration: The animation duration in milliseconds. default: 5000
  • fps: Consistant frames per second for the animation. default: 60
  • loop: Should the animation loop? default: false
  • draw: The draw function which is called for each loop.
  • onEnd: A function to call when the animation is finished.
  • onCancel: A function to call when the animation is canceled. If this is not specified it will call the onEnd function

Advanced Usage

This package's main export is perfect for handling single animations, but it also exports a loop for more complex work. A single loop can be started for general animation use, and many Transient animation instances can be attached to one loop. Here is an example:

const Animation = require('transient')
const Loop = require('transient/loop') // or const Loop = Animation.Loop

// Only use one loop to syncronize the animations
var l = new Loop()

var moveBackground = new Animation({
  duration: 1000 * 10, // 10s
  animationLoop: l,
  draw: function (progress) {
    // Draw background
  }
})
var moveForeground = new Animation({
  duration: 1000 * 5, // 5s
  animationLoop: l,
  draw: function (progress) {
    // Draw foreground
  }
})

// Start the animations
moveBackground.start()
moveForeground.start()

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.