NuxtAnime

A Plug & Play Adapter for the new Anime.js 4 Version.

• ✨  Release Notes
• 🏀 Online playground
• 📖  Documentation

Features

• ✨ Zero Configuration: No setup required to get started.
• 💪 Flexible Usage: Choose your style – use as Composables, Directives, or Components.
• 👷 Core Features: Currently supports animate and timeline. More functions and helpers are planned!
• 👷 Type-Safe: Full TypeScript support for current Anime.js v4 parameters.
• 🧩 Easy & Customizable: Simple to integrate and fully adaptable to your needs.
• 🕹️ Full Control: Provides complete access to the JSAnimation object and methods returned by Anime.js for fine-grained control.

Quick Setup

Install the Module manually with:

npm install nuxt-anime

Then, add it to your modules in your nuxt.config

export default defineNuxtConfig({
  modules: ["nuxt-anime"],
});

That's it! You can now use NuxtAnime in your Nuxt app ✨

<script>
  const box = useTemplateRef("box");
  const anim = await useAnimate(box, {
    autoplay: false,
    x: 100,
    rotate: 360,
  });
</script>

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

📑 License

Published under the MIT License