simple easing animations using requestAnimationFrame

Downloads in past


100.4.07 years ago7 years agoMinified + gzip package size for animazione in KB


simple easing animations using requestAnimationFrame


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


$ npm install --save animazione


<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) {['left'] = val + 'px';

function renderTop(val) {['top'] = val + 'px';


Class: Animazione

Create a new Animazione instance.
new Animazione(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


  • 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