nuxt-gsap

GSAP module for Nuxt.

Features

• Vue directive that can be easily used.
• Automatically registers plugins.

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @zinkawaii/nuxt-gsap

That's it! You can now use nuxt-gsap in your Nuxt app ✨

Options

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@zinkawaii/nuxt-gsap"],
  gsap: {
    /* gsap options */
  }
});

• trial: boolean

  Imports plugins from "gsap-trial" instead of "gsap".

• plugins: string[]

  List of plugin names to import.

Directives

v-gsap

v-gsap provides a set of convenient shortcuts for invoking GSAP methods on DOM elements.

<div v-gsap.to="{ /* Options */ }"/>

is same as:

<script lang="ts" setup>
  const gsap = useGsap();

  onMounted(() => {
    gsap.to(".box", { /* Options */ });
  });
</script>

<template>
  <div class="box"></div>
</template>

The available built-in modifiers also include "from" and "fromTo".

Additionally, it is also possible to invoke registered effects.

<script lang="ts" setup>
  const gsap = useGsap();
  gsap.registerEffect({
    name: "rotate",
    effect(targets, config) {
      return gsap.to(targets, { rotate: 360, ease: "linear", duration: 1.5, repeat: -1, ...config });
    }
  });
</script>

<template>
  <div v-gsap.rotate="{ /* Options */ }"></div>
  <div v-gsap.rotate></div> <!-- use default options -->
</template>

Utils

useGsap()

Return the global GSAP instance.

const gsap = useGsap();

Contribution

# 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