npmpubsimpleone v1.1.7

Animate Plus

Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and weighs less than 3 KB (minified and compressed), making it particularly well-suited for mobile.

Getting started

npm install animateplus or download animateplus.js and start animating things:

import animate from "/animateplus.js";

animate({
  elements: "div",
  duration: 2000,
  delay: index => index * 100,
  transform: ["scale(0)", "scale(1)"]
})
.then(options => animate({
  ...options,
  transform: ["translate(0%)", "translate(500%)"]
}));

Preview this example →

Options

elements

Determines the DOM elements to animate. You can either pass it a CSS selector or DOM elements.

animate({
  elements: document.body.children,
  transform: ["rotate(0turn)", "rotate(1turn)"]
});

easing

Determines the acceleration curve of your animation.

The amplitude and period of elastic easings can be configured by providing space-separated values. Amplitude defaults to 1, period to 0.4.

// Increase elasticity
animate({
  elements: "span",
  easing: "out-elastic 1.4 0.2",
  transform: ["translate(0px)", "translate(500px)"]
});

duration

Determines the duration of your animation in milliseconds. By passing it a callback, you can define a different duration for each element. The callback takes the index of each element as its argument and returns a number.

// First element fades out in 1s, second element in 2s, etc.
animate({
  elements: "span",
  easing: "linear",
  duration: index => (index + 1) * 1000,
  opacity: [1, 0]
});

delay

Determines the delay of your animation in milliseconds. By passing it a callback, you can define a different delay for each element. The callback takes the index of each element as its argument and returns a number.

// First element fades out after 1s, second element after 2s, etc.
animate({
  elements: "span",
  easing: "linear",
  delay: index => (index + 1) * 1000,
  opacity: [1, 0]
});