whatisgithub

What is animateplus?

bendc/animateplus — explained in plain English

Analysis updated 2026-07-03

5,941JavaScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

A tiny JavaScript animation library under 3KB that animates HTML and SVG elements with a single function call, targeting a steady 60 frames per second. Returns a Promise so animations chain cleanly with async/await and sequential timelines need no extra API.

Mindmap

mindmap
  root((repo))
    Core API
      animate function
      Promise return
      async/await chains
    Easing options
      Linear and cubic
      Elastic with bounce
      Alternate direction
    Targets
      HTML elements
      SVG attributes
      CSS transforms
    Utilities
      Stop function
      Motion blur
      Battery-safe delay
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Stagger a row of cards so each one fades in one after another using a single animate() call with a delay function based on element index.

USE CASE 2

Chain a sequence of animations with async/await so each element moves only after the previous one finishes, without building a separate timeline.

USE CASE 3

Animate SVG fill colors or path attributes with elastic easing to create bouncy hover effects on icons or illustrations.

USE CASE 4

Add a motion blur effect to fast-moving elements to make the animation feel more physical without using CSS filters.

What is it built with?

JavaScriptES2015

How does it compare?

bendc/animatepluslearning-zone/website-templatesar-js-org/ar.js
Stars5,9415,9415,940
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasymoderate
Complexity2/51/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min
License not specified in the explanation.

So what is it?

Animate Plus is a small JavaScript library for animating HTML and SVG elements in a web browser. It weighs under 3 kilobytes after compression and targets a consistent 60 frames per second, making it well-suited for performance-sensitive pages and mobile devices. The library works by calling a single function, animate(), with an options object that describes what to animate and how. You point it at elements using a CSS selector or direct DOM references, then provide start and end values for CSS properties, transforms, or SVG attributes such as fill color. Duration, delay, and property values can each be defined as functions that receive the index of each element, which makes staggering a group of elements straightforward without writing loops. Timing follows a set of easing curves covering linear, cubic, quartic, quintic, exponential, circular, and elastic patterns. The elastic easing accepts extra parameters for amplitude and period to control the amount of bounce. Setting loop to true keeps an animation repeating, and direction can be set to alternate to reverse the animation on each cycle. A speed option lets developers slow down or speed up playback during authoring without changing duration values. animate() returns a JavaScript Promise that resolves once the animation finishes, passing the original options object back so they can be spread into the next call. This makes sequential animations clean to write with async/await or .then(), with no separate timeline API needed. Additional utilities include a stop() function that halts animation on specific elements, a motion blur effect for fast-moving objects, and a delay() helper that works like setTimeout but returns a Promise and is more battery-friendly. The library ships as an ES2015 module and is also available on CDNJS and jsDelivr.

Copy-paste prompts

Prompt 1
Using animateplus, write a JavaScript snippet that staggers five list items so each one slides in from the left 80ms after the previous, using cubic easing and a 400ms duration.
Prompt 2
Using animateplus, create a looping loading animation where three dots scale up and down in sequence, alternating direction on each cycle using the alternate direction option.
Prompt 3
With animateplus, build an async/await sequence where a card first scales up, then its text fades out, and finally the card collapses to zero height, each step waiting for the previous to finish.
Prompt 4
Using the animateplus stop() function, start an infinite spinning animation on a loader element and stop it as soon as a fetch() call resolves.

Frequently asked questions

What is animateplus?

A tiny JavaScript animation library under 3KB that animates HTML and SVG elements with a single function call, targeting a steady 60 frames per second. Returns a Promise so animations chain cleanly with async/await and sequential timelines need no extra API.

What language is animateplus written in?

Mainly JavaScript. The stack also includes JavaScript, ES2015.

What license does animateplus use?

License not specified in the explanation.

How hard is animateplus to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is animateplus for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.