README.md

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.

duration

Default

Type

1000

Number | Function

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.

delay

Default

Type

0

Number | Function

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.

loop

direction

Determines the direction of the animation. reverse runs the animation backwards, alternate
switches direction after each iteration if the animation loops.

speed

Default

Type

1

Number

Determines the animation playback rate. Useful in the authoring process to speed up some parts of a
long sequence (value above 1) or slow down a specific animation to observe it (value below 1).

optimize

Default

Type

false

Boolean

Forces hardware acceleration during an animation if set to true. Unless you experience performance
issues, it's recommended to leave it off as hardware acceleration comes with potentially harmful
side-effects.

blur

Default

Type

null

Object | Function

Simulates a motion blur effect. Takes an object or a function returning an object that specifies the
strength of the directional blur on the x and y axes. A missing axis defaults to 0, which
disables the blur on that axis.

Promise

animate() returns a promise which resolves once the animation finishes. The promise resolves to
the object initially passed to animate(), making animation chaining straightforward and
convenient. The Getting started section gives you a basic promise example.

Since Animate Plus relies on native promises, you can benefit from all the usual features promises
provide, such as Promise.all, Promise.race, and especially async/await which makes animation
timelines easy to set up.

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:

Content delivery networks

Best practices

Animations play a major role in the design of good user interfaces. They help connecting actions to
consequences, make the flow of interactions manifest, and greatly improve the polish and perception
of a product. However, animations can be damaging and detrimental to the user experience if they get
in the way. Here are a few best practices to keep your animations effective and enjoyable:

Speed: Keep your animations fast. A quick animation makes a software feel more productive and
responsive. The optimal duration depends on the effect and animation curve, but in most cases you
should likely stay under 500 milliseconds.

Easing: The animation curve contributes greatly to a well-crafted animation. The ease-out
options are usually a safe bet as animations kick off promptly, making them react to user
interactions instantaneously.

Performance: Having no animation is better than animations that stutter. When animating HTML
elements, aim for using exclusively transform and opacity as these are the only properties
browsers can animate cheaply.

Restraint: Tone down your animations and respect user preferences. Animations can rapidly feel
overwhelming and cause motion sickness, so it's important to keep them subtle and to attenuate
them even more for users who need reduced motion, for example by using matchMedia("(prefers-reduced-motion)") in JavaScript.