anime function which takes an object as its argument. This object is the basis for the abundance of customization options that anime.js offers. We will talk about a few important ones now.
The first and most important property that every
anime call should have is
targets. It selects which DOM elements to apply the animation to. There are a few ways to select targets. First is to directly grab a single element from by using a string using CSS selector formats such as
div elements and apply the same animation to them by using
document.querySelector(‘div’) and setting that to the target.
Whichever way you decide to target, you need to be able to manipulate it. This is where the rest of the props come in. If you target any normal DOM element, including SVG, you can set a prop as any CSS property or DOM attribute that applies to that element type. For example, sliding a square across the screen while doubling its size, rotating it 360 degrees and changing its color to red is as simple as:
The next category of options are parameters which affect the way in which properties are transformed. The following are examples of such parameters:
- duration: indicates how long the animation lasts (in milliseconds),
- delay: indicates a wait time (in milliseconds) after which the animation starts,
- endDelay: attaches extra time to the end of the animation (in milliseconds),
- round: rounds up to the nearest decimal.
A more complex parameter is
easing. Easing refers to the rate of change of an object over time. In our case the changes are the transforming properties, so easing changes how fast or slowly they animate at a given moment. For more information check out this link. As well as setting these parameters to affect an entire animation, you can designate specific properties to behave differently from others. This is done by assigning the property to an object whose properties include a
value, which is the normal value for the animation, and any of the parameters which you want to single out. For example: As you can see the box moved before starting to grow or spin which each had a different easing.
The last category of props consists of the types of parameters which affect the animation as a whole. These are the simplest types of parameters. They include direction, loop, and autoplay. Direction defines the direction in which the animation will play:
’alternate’. Normal plays the animation from 0% progress to 100%. Reverse plays it from 100% to 0%. Alternate will first play a normal animation then a reverse animation in sequence. Adding a delay will affect the time between the normal play and the reverse play. Loop defines the number of times an animation will play. Setting the value to
true will cause the loop to play infinitely. Autoplay defines whether the animation will play automatically at render. This value is set to
true by default.
Keyframes and timelines serve the purpose of setting a sequence of animations to play one after the other. Keyframes set a sequence on a single element and will count as a single animation in the course of a timeline. Keyframes are defined using an array either within the keyframes property or as a value for a CSS property. By setting keyframes to CSS properties, you can overlap animations since each property has its own keyframes array. Here’s an example:
Timelines let you synchronize multiple animations together. By default each animation added to the timeline starts after the previous animation ends.
Anime.js is robust and easy to use framework for animations in web browsers. Check out their docs here and start creating amazing animations.