GSAP Directive for Nuxt 3 with SplitText support
npm install @mrbubbaz/v-gsap-nuxtv-gsap for Nuxt (and Vue)[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href] [![Nuxt][nuxt-src]][nuxt-href]
 (Click image to
visit the docs)
- 🚀 Smooth animations with GSAP
- 🖍️ Easy to use directive syntax with
v-gsap
- 📦 useGSAP() composable
for complex animations
- 🪄
v-if
- ⌨️ Powerful
entrance presets
and custom presets
- 🧩 Full GSAP
Plugin extensibility
Install the module to your Nuxt application with one command:
``bash`
npx nuxi module add v-gsap-nuxt
That's it! You can now use v-gsap in your Nuxt app ✨
---
GSAP is subject to its own licensing terms. Before incorporating GSAP with
v-gsap-nuxt (as dependency), ensure you review and comply with the
GSAP Standard License.
This module itself is licensed under the MIT License.
---
Local development
`bash``
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev:playground
# OR
# Develop with the Docs
npm run dev:docs
# Build the playground
npm run dev:build
# Run ESLint
npm run dev:check
# Release new version
npm run release
[npm-version-src]:
https://img.shields.io/npm/v/v-gsap-nuxt/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/v-gsap-nuxt
[npm-downloads-src]:
https://img.shields.io/npm/dm/v-gsap-nuxt.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/v-gsap-nuxt
[license-src]:
https://img.shields.io/npm/l/v-gsap-nuxt.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/v-gsap-nuxt
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com