Zoetrope NPM | npm.io

Introduction

Zoetrope provides a clean API for defining basic javascript animations using requestAnimationFrame. It should be very familiar if you have ever used jQuery.animate() progress events. But Zeotrope is dependency free, has a small file size (less than 2KB gzipped) and is much more performant.

It doesn't come with any animations out of the box, it's just a tiny helper so you can say: Do x every frame for x seconds with x easing

If you are looking for a full animation framework i recommend Anime.js or GSAP

Browser Support

If requestAnimationFrame isn't available, Zoetrope will polyfill rAF using setTimeout(). Using the implimentation by Paul Irish

IE / Edge	Firefox	Chrome	Safari
IE9+	✓	✓	✓

Installation

Using npm

$ npm install zoetrope --save

Using Yarn

$ yarn add zoetrope

Example

import Zoetrope from 'zoetrope'

// Animating DOM elements, but this could easily be a canvas animation.
let $container = document.querySelector('.animation')
let $leftCircle = document.querySelector('.circle--left')
let $rightCircle = document.querySelector('.circle--right')

// Lots of nice easings can be found in this thread: https://gist.github.com/gre/1650294
let easeInOutCubic = t => { return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1 }

// Define what our animation should do each tick, all we need is the current progress.
let spin = progress => {
  // translation
  let percentage = progress * 300
  // rotation
  let rotation = 360 * progress

  $leftCircle.style.transform = `translateX(${percentage}%) rotate(${rotation}deg)`
  $rightCircle.style.transform = `translateX(-${percentage}%) rotate(${rotation}deg)`
  $container.style.transform = `translate(-50%, -50%) rotate(${rotation}deg)`
}

// Define our animation.
let animation = new Zoetrope({
  duration: 3500,
  onTick: spin,
  onStart: () => {
    console.log('Started!')
  },
  easing: easeInOutCubic
})

// Add extra event listeners.
animation.on('complete', () => {
  console.log('Done!')
})

// Start the animation looping, with a 500ms delay inbetween each loop
animation.loop(500)

Setup

import Zoetrope from 'zoetrope'

let anim = new Zoetrope()

API

play

Start the animation

anim.play()

reverse

Start the animation in reverse

anim.reverse()

pause

Pause the animation but keep the RAF running so it can be resumed.

anim.pause()

resume

Resume the animation if it was paused, otherwise it does nothing.

anim.resume()

stop

Stop the animation, cannot be resumed as it destroys the current instance of RAF.

anim.stop()

loop(delay)

Loop the animation forwards then backwards with an optional delay inbetween.

// Play the animation forwards, wait 200ms then play it backwards and repeat forever.
anim.loop(200)

duration(duration)

Set the duration of the animation in ms.

// On creation
anim = new Zoetrope({
  duration: 5000
})

// Or later
anim.duration(5000)

easing(easingFunc)

Set a function to determine easing for the animation, if this is not called the animation will just use easeOutQuint easing.

// Define your own, only accepts one value of current time
// More available here: https://gist.github.com/gre/1650294
let easeInCubic = t => { return t*t*t }

// On creation
anim = new Zoetrope({
  easing: easeInCubic
})

// Or later
anim.easing(easeInCubic)

debug

Log a shallow copy of the current state

let anim = new Zoetrope({
  duration: 300
})

anim.debug() // logs: {duration: 300, easing: easeOutQuart, ...}
    .duration(2000)
    .debug() // logs: {duration: 2000, easing: easeOutQuart, ...}