Open SourceResources

Create Beautiful CSS Animation with 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. Animate Plus lets you animate HTML and SVG elements with any property that takes numeric values, including hexadecimal colors.

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%)"]
}));

You can read more about the api and usage at the Github repository.

Browser support

Animate Plus is provided as a native ES2015 module, which means you may need to transpile it depending on your browser support policy. The library works as is using <script type=module> in the following browsers:

  1. Chrome 61
  2. Safari 11.1
  3. Firefox 60