How to animate CSS and SVG's with AnimeJS
Tags: javascript, tutorial
Published: 2020-03-12 04:16:30

---
title: How to animate CSS and SVG's with AnimeJS
published: true
date_time: 11/03/2020 20:30:00 MDT
tags: javascript,tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/xd8xczu0cdzd9nxqlleu.jpeg
description: AnimeJS is a great JavaScript animation library with various features like SVG morphing animations and CSS animations.
canonical_url: https://developerbacon.ca/articles/how-to-animate-css-and-svg-s-with-anime-js/
---

## Installation

Before we get into the animating we should install Animejs.

```bash
npm install animejs
#or
yarn add animejs

```

Now to import Animejs into your JavaScript file.

```js
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.

```js
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.

```js
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.

```js
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](https://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.

```js
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](https://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.

```js
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.

```js
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.

```js
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.

```js
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.

<iframe height="412" style="width: 100%;" scrolling="no" title="Animejs with a list" src="https://codepen.io/brettanda/embed/oNXEMoj?height=412&amp;theme-id=dark&amp;default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/brettanda/pen/oNXEMoj">Animejs with a list</a> by Brett
  (<a href="https://codepen.io/brettanda">@brettanda</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>
## 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`.

```js
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`.

```js
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).

<iframe height="390" style="width: 100%;" scrolling="no" title="SVG Animating" src="https://codepen.io/brettanda/embed/vYOdaGN?height=390&amp;theme-id=dark&amp;default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/brettanda/pen/vYOdaGN">SVG Animating</a> by Brett
  (<a href="https://codepen.io/brettanda">@brettanda</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>
## 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](https://animejs.com/documentation/).