animazione

simple easing animations using requestAnimationFrame

Features

• custom easing
• chainable animations
• optimized frame skip
• target fps
• animation completed callback
• loop

Install

$ npm install --save animazione

Usage

<div class="box"></div>

const box = document.querySelector('.box');
const a = new Animazione({
  render: renderLeft, // render function for each frame
  target: box, // set the context to bind the render function to
  duration: 400, // animation step duration
  initialValue: 0, // initial value passed to render function
  endValue: 500, // end value to be reached in the render function
  easing: t => -0.5 * (Math.cos(Math.PI*t) - 1), // easing function
  onComplete: () => { console.log('first finished') }, // callback on animation step completed
}).andThen({ // multiple steps can be chained
  render: renderTop,
  duration: 400,
  initialValue: 0,
  endValue: 500,
  onComplete: () => { console.log('second finished') }
})
.loop() // a set of step animations can be looped forever
.start(); // start the animation
      
function renderLeft(val) {
  this.style['left'] = val + 'px';
}

function renderTop(val) {
  this.style['top'] = val + 'px';
}

API

Class: Animazione

Create a new Animazione instance.

new Animazione(animation)

animation

animation step

type: Object

• render {function} Render function

Default: noop

• target {Any} Context for the render function

Default: null

• duration {integer} Step duration

Default: 0

• easing {function} Easing function

Default: t => t (linear easing)

• initialValue

Default: {integer} 0

• endValue

Default: {integer} 1

• fps

Default: {integer} 60

• loop

Default: {boolean} false

• onComplete

Default: {function} noop

Methods

• start() Start the animation

Returns current Animazione instance

• andThen(animation) Chain another animation step

animation and animation step Returns current Animazione instance

• wait(duration) pause the animation

duration {integer} pause duration in ms Returns current Animazione instance

• loop() Make the animation an infinite loop of all the currently defined steps

Returns current Animazione instance

• stop() Stop the animation