Notice!!!

Since Nuxt migrates to the latest version, it's only a matter of time before they drop support for older versions.

This module still works normally in Nuxt 2, but will no longer be maintained properly. If you are planning a new project, I highly recommend using the latest updated version of the module.

The new @hypernym/nuxt-anime module is optimized and supports Nuxt 3 with TypeScript.

_{Latest Module}

@hypernym/nuxt-anime

---

Nuxt Animejs

Anime.js module for Nuxt.

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 to go 🚀

Quick Start

1. Install nuxt-animejs dependency to your project

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

2. Enable nuxt-animejs in the buildModules section

`js
// nuxt.config.js

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

That's it! Start developing your app!

Examples

Here are some code examples

- Basic
- Custom Directive
- Page Transitions
- Staggering

$3

`html



`

$3

`html



`

$3

`html



`

$3

`js
// nuxt.config.js

{
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
})
}
}
}
`

Custom Directive

Module allows you to easily animate elements via custom v-anime directive and its modifiers.

$3

- Directive: v-anime
- Default: true

`html

`

More info

$3

- Modifier: v-anime.set
- Default: true

`html

`

More info

Module Options

Here are all the default options that can be used for customization:

`js
// nuxt.config.js

export default {
animejs: true
}
`

$3

- Default: true

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

`js
// nuxt.config.js

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

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

Available globally

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

// or
const anime = this.$anime

anime({
targets: '.p1',
translateX: 250,
duration: 800
})
``

License

Anime.js

MIT License

Copyright (c) Julian Garnier

Nuxt Animejs Module

MIT License

Copyright (c) Ivo Dolenc