Nuxt, Meet Anime
Tags: nuxt, javascript, vue, anime
Published: 2020-04-14 04:22:01

This article is part of a series on my experiences with Nuxt.js that I built into the [nuxt-toolkit](https://github.com/overscore-media/nuxt-toolkit) by [OverScore Media](https://overscore.media) {% github https://github.com/overscore-media/nuxt-toolkit no-readme %}

See a live example at https://nuxt-toolkit.overscore.media! :]

-----

![You Thought This was a Meme Alt Text, but it was Me, DIO!](https://dev-to-uploads.s3.amazonaws.com/i/xi6078qjn4xfmly6goyv.png)

Aight, Elephant in the room, the only Anime series I've actually watched start-to-end is Rockman EXE (Plus Axess, Stream, Beast, and Beast +. And both seasons of Ryuusei no Rockman). 

![Rockman EXE anime GIF](https://thumbs.gfycat.com/RemarkableKeenGoosefish-small.gif)

For those of you who haven't been enlightened, Rockman EXE and its suprisingly-large list of successors is a series set in a universe based on a bunch of GBA games where MegaMan is a tamagotchi. It's my guilty pleasure show (outside of the first three seasons of Arrested Development). For those of you who have, "Plug In - Rockman EXE - POWER UP!"

## That Aside Aside...

So, [Anime.js](https://animejs.com/) by [Julian Garnier](https://github.com/juliangarnier) and [co.](https://github.com/juliangarnier/anime/graphs/contributors). The incredible JavaScript animations library. I personally love it, since I think it's so declarative and extensible. And, hey, it may not be the smallest out there, but it packs a lot of punch for its [17KB size](https://bundlephobia.com/result?p=animejs@3.2.0).

But how, pray tell, would one go about integrating Anime.js in one's Nuxt app?

## It's really not all that difficult.

The way I see it, you have two main options here. You can either load in `animejs` itself, or you can use the `vue-anime` directive.

Honestly, it's your call. The former means a (slightly) lower bundle size (Maybe? I actually don't know) and makes it a bit easier to write the animation code, but the latter lets you plug in animations directly in the template of your Vue components (and by extension, Nuxt pages and layouts). If you're used to Vue, I'd recommend the directive, but I'll show both ways and let you make up your own mind. Besides, you can experiment once you know the options available to you.

Either way you decide to import/use it, [Anime.js's documentation](https://animejs.com/documentation/) is invaluable. If in doubt, check the docs! :) One thing you _do_ need to know, though, is that Anime works well with CSS transforms/translates. That being said, you might think that a `translateX: 100` will move your object 100 pixels. Technically, you'd be right, but more specifically it adds the translation directly to the object. So it's relative to the object's initial position, I think. If that makes sense. If it doesn't, you'll figure it out soon enough. Trust me; if I did, you can too. I wish I could teach you how to learn everything you wanted to learn, but believe it or not, you're your best teacher. You know how you learn. Don't sell yourself short, but don't worry about meeting your own expectations... Well, OK then. Let's continue!

### Way 1: Direct Usage

First, install Anime.js with `yarn add animejs` or your NPM equivalent (`npm install --save animejs` I think).

Then you can use it. Here's a bare-bones example. Note the import of `animejs/lib/anime.es.js` and the use of the Vue `mounted` hook, and the `process.browser` to check if the code is running on a browser (and not a server... it's a Nuxt thing).

```vue
<template>
  <!-- -->
  <div class="target-class"></div>
  <!-- -->
</template>

<script>
import anime from 'animejs/lib/anime.es.js'

export default {
// ...
  mounted: {
    if (process.browser) {
      anime({
        targets: '.target-class',
        translateX: 100,
        duration: 2000
      })
    }
  }
// ...
</script>
```

### Way 2: Directive Usage

First off, thank you [@BenAHammond on GitHub](https://github.com/BenAHammond) for coming up with the idea for the `vue-anime` directive. {% github https://github.com/BenAHammond/vue-anime no-readme %}

Next, install it with `yarn add vue-animejs` or `npm install --save vue-animejs`

Wait, I figured out the difference between NPM and Yarn. NPM is Node's `oh-my-zsh`, and Yarn is Node's `antigen`. If you don't use `zsh`, you probably have no idea what I'm talking about. Regardless, they're two tools (the latter of which depends on the former sorta to be fully functional) that basically do the same thing, but some people like one more than the other. Isn't the development world exciting? Yes, it is; whether or not you like excitement, you can't deny that. Oh, I went and wrote a whole paragraph about basically nothing. You still there, by chance? Hi!

To regain my bearings, I'll tell you that you next need to make a Nuxt plugin in the `~/plugins` directory of your Nuxt app. I named mine `anime.js` and it has this content:

```js
import Vue from 'vue'
import VueAnime from 'vue-animejs'

Vue.use(VueAnime)

```

I then imported said plugin in my `nuxt.config.js` in the `plugins` section like this:

```js
// ...
plugins: [
  '~/plugins/anime.js'
],
// ...
```

Finally, use the directive. Either use it directly (as in this example from the directive's GitHub repo):

```
<div v-anime="{ rotate: '1turn', backgroundColor: '#FFF', duration: 2000, loop: true }"></div>
```

Or put something like this in the `<script>` tag of your Vue component/page/layout:

```js
// ...
const animeDiv = this.$el.getElementsByClassName('target-class')
// ...
this.$anime({
   targets: animeDiv,
   background: ['#fff', '#000'],
   duration: 3000,
   loop: true,
   direction: 'alternate'
})
// ...
```

Either way, pretty cool! ![Pretty Cool Bananas](https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRY6O0nAIuzhfhPBk2lIJ8mRsUKdUcv4PpUbsB3kbsMXSDvFUei&usqp=CAU)

Have fun, everybody, and keep on coding! Hope this was helpful.