animejs

Basic Animation

This feature allows you to animate basic properties like translation, rotation, and background color of a DOM element.

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});

Timeline Control

Timelines allow you to create complex animation sequences with precise control over the timing of each animation.

var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

tl.add({
  targets: '.box',
  translateX: 250
}).add({
  targets: '.box',
  translateY: 250,
  offset: '-=500' // Starts 500ms before the previous animation ends
});

SVG Animations

Anime.js can animate SVG properties, allowing for intricate and visually appealing vector animations.

anime({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: function(el, i) { return i * 250 },
  direction: 'alternate',
  loop: true
});

Keyframes

Keyframes allow you to define multiple stages of an animation, giving you more control over the animation sequence.

anime({
  targets: '.box',
  keyframes: [
    {translateX: 250},
    {translateY: 250},
    {translateX: 0},
    {translateY: 0}
  ],
  duration: 4000,
  easing: 'easeOutElastic(1, .8)',
  loop: true
});