README

Nuxt Animejs Module

Anime.js module for Nuxt.js

Features

Helps you integrate Anime.js javascript animation library
Allows you to easily animate elements via custom v-anime directive 🔥
Provides a solution for global use via this.$anime
Zero-config setup ready for development 🚀

Quick Start

Add nuxt-animejs dependency to your project

$ npm install --save-dev nuxt-animejs # or yarn add --dev nuxt-animejs

Add nuxt-animejs to the buildModules section of nuxt.config.js

// nuxt.config.js

export default {
  buildModules: ['nuxt-animejs']
}

That's it! Start developing your app ✨

Examples

💻 Here are some code examples

Page Transitions

Custom directive: v-anime

<!-- index.vue -->

<template>
  <h1
    v-anime="{
        rotate: 360,
        backgroundColor: ['#2f495e', '#00c58e'],
        duration: 3000,
        loop: true,
      }"
  >
    NUXT ANIMEJS
  </h1>
</template>

Custom modifier: v-anime.set

<!-- index.vue -->

<template>
  <h2
    v-anime.set="{
        color: '#2f495e',
        backgroundColor: '#00c58e',
      }"
  >
    NUXT ANIMEJS
  </h2>
</template>

More info

Hello world

// index.vue

export default {
  mounted() {
    this.helloWorld()
  },

  methods: {
    helloWorld() {
      const anime = this.$anime

      anime({
        targets: '.element',
        translateX: 250,
        rotate: '1turn',
        backgroundColor: '#FFF',
        duration: 800
      })
    }
  }
}

Animate element on click

<!-- index.vue -->

<template>
  <div>
    <button @click="animeEl">Click me</button>
    <p class="p1">Nuxt Animejs Module</p>
  </div>
</template>

// index.vue

export default {
  methods: {
    animeEl() {
      this.$anime({
        targets: '.p1',
        translateX: 250,
        rotate: '1turn',
        backgroundColor: '#FFF',
        duration: 800
      })
    }
  }
}

Nuxt global page transitions

// nuxt.config.js

{
  // Enable module
  buildModules: ['nuxt-animejs'],

  // Add global page transition
  pageTransition: {
    name: 'page',
    mode: 'out-in',
    css: false,

    beforeEnter(el) {
      this.$anime.set(el, {
        opacity: 0
      })
    },

    enter(el, done) {
      this.$anime({
        targets: el,
        opacity: [0, 1],
        duration: 500,
        easing: 'easeInOutSine',
        complete: done
      })
    },

    leave(el, done) {
      this.$anime({
        targets: el,
        opacity: [1, 0],
        duration: 500,
        easing: 'easeInOutSine',
        complete: done
      })
    }
  }
}

Options

Default options

// nuxt.config.js

{
  animejs: true,
}

`animejs`

Default: true

✅ Anime.js is enabled by default so there is no need for additional configuration.

// nuxt.config.js

{
  buildModules: ['nuxt-animejs'],

  // If you want to disable Anime.js, set option to 'false'
  // This is useful for quick tests
  animejs: false
}

Available globally

// Access Anime.js by using
this.$anime

// or
const anime = this.$anime

anime({
  /* ... */
})

Use in templates

<div v-anime="{ /* ... */ }"></div>

<div v-anime.set="{ /* ... */ }"></div>

More info

License

Anime.js

MIT License

Nuxt Animejs Module