How to animate CSS and SVG's with AnimeJS

Installation

Before we get into the animating we should install Animejs.

npm install animejs
#or
yarn add animejs

Now to import Animejs into your JavaScript file.

import anime from "animejs";

Constructor and target setting

To start any animation with AnimeJS you will need a constructor like the following. The targets is the selector for the element(s) that you would like to target.

anime({
    targets: "ul > li"
});

Basics to animating

Duration

Adding duration to your animation will set how long the animation will play. The value for the duration is in milliseconds.

anime({
    targets: "ul > li",
    duration: 1000 // 1 second
});

Direction

You can choose the direction of the animation with the below code. The options for directions you can pick from are normal, reverse, alternate. If you choose not to set a value for direction then normal is the default direction.

anime({
    targets: "ul > li",
    duration: 1000,
    direction: "normal"
});

Easing

You can also add easing to your animation. There are a bunch of different values to set for easing that can be found at animejs.com/documentation/#linearEasing. My favorite value is easeInOutSine because it performs like ease-in-out from CSS animations and works well (for me) on just about every animation I create.

anime({
    targets: "ul > li",
    duration: 1000,
    direction: "normal",
    easing: "easeInOutSine"
});

Staggering and Delays

In my opinion, staggering is the coolest feature because it allows you to set one animation after (or during) another, meaning you can make nice wave effects with your animations. The documentation for staggering can be found at animejs.com/documentation/#staggeringBasics. If you have several elements selected for an animation then the code below sets a 100-millisecond delay between each elements' starting animation.

anime({
    targets: "ul > li",
    duration: 1000,
    direction: "normal",
    easing: "easeInOutSine",
    delay: anime.stagger(100)
});

To set a normal delay you will set the delay value to your delay in milliseconds like below. Instead of this code setting a delay between each element, this sets the delay for the entire animation. This example, when called, will wait 100ms then start animating.

anime({
    targets: "ul > li",
    duration: 1000,
    direction: "normal",
    easing: "easeInOutSine",
    delay: 100
});

CSS Transform

To add a transform to your animation it's just like CSS transforms but you can skip the transform and go straight to translate, rotate, or skewing. What I mean by this is that in CSS you would set a translate of -1rem on the x-axis like transform: translateX(-1rem); and with AnimeJS you would do the same like this example.

anime({
    targets: "ul > li",
    duration: 1000,
    direction: "normal",
    easing: "easeInOutSine",
    delay: 100,
    translateX: "1rem"
});

To and from values

If you want to start an animation in a different position than you have set with HTML and CSS then you can set an array of the values. You can add as many values as you would like in the arrays.

anime({
    targets: "ul > li",
    duration: 1000,
    direction: "normal",
    easing: "easeInOutSine",
    delay: 100,
    translateX: ["-1rem", 0]
});

I have made a Codepen using AnimeJS and the examples from above.

See the Pen Animejs with a list by Brett
(@brettanda) on CodePen.

Animating SVG's

Now for the fun SVG animations!

Line Drawing

If you want to make an SVG that draws itself from nothing then you will like this feature. To add line drawing you will need an element like the path in the SVG because it works with stroke-dasharray and stroke-dashoffset.

anime({
    targets: ".cool-svg path",
    duration: 1000,
    easing: "easeInOutSine",
    strokeDashoffset: [anime.setDashoffset, 0]
});

Morphing

If you want an SVG to transform into a different shape then this is the feature for you! You can add morphing to any SVG element with a path set like the d attribute in the path element. In the below example you can change the d for whatever sets the elements path, for example with the polygon element you would change it to points.

anime({
    targets: ".cool-svg path",
    duration: 1000,
    easing: "easeInOutSine",
    d: [
        {
            value:
                "M53,234c143.452,-81.953,313.407,-167.554,430,-107c116.592,45.554,70.404,361.126,236,472c235.595,95.873,447.977,-197.535,477,-306"
        },
        {
            value:
                "M53,434c143.452,181.953,213.407,267.554,330,107c56.592,-125.554,70.404,-161.126,236,-172c235.595,-55.873,447.977,-197.535,500,206"
        }
    ]
});

Below is another Codepen example of both morphing and drawing (although a bit of a messy animation it gets the point across).

See the Pen SVG Animating by Brett
(@brettanda) on CodePen.

Conclusion

This article just went through a few of the features of AnimeJS if you would like to see what else it can do check out the full documentation.