https://github.com/holux-design/v-gsap-nuxt
Awesome GSAP for Nuxt
https://github.com/holux-design/v-gsap-nuxt
composable directive gsap nuxt nuxt3 scrolltrigger transition vue
Last synced: about 1 year ago
JSON representation
Awesome GSAP for Nuxt
- Host: GitHub
- URL: https://github.com/holux-design/v-gsap-nuxt
- Owner: holux-design
- Created: 2024-11-28T10:59:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-17T07:13:40.000Z (about 1 year ago)
- Last Synced: 2025-03-28T18:07:02.055Z (about 1 year ago)
- Topics: composable, directive, gsap, nuxt, nuxt3, scrolltrigger, transition, vue
- Language: TypeScript
- Homepage: https://v-gsap-nuxt.vercel.app
- Size: 1.54 MB
- Stars: 90
- Watchers: 4
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# `v-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]
[](https://v-gsap-nuxt.vercel.app/) (Click image to
visit the docs)
## Features
- 🚀 Smooth animations with [GSAP](https://gsap.com/)
- 🖍️ Easy to use directive syntax with
[`v-gsap`](https://v-gsap-nuxt.vercel.app/playground)
- 📦 [`useGSAP()`](https://v-gsap-nuxt.vercel.app/usage/composable) composable
for complex animations
- 🪄 [``](https://v-gsap-nuxt.vercel.app/usage/v-if) to animate
`v-if`
- ⌨️ Powerful
[entrance presets](https://v-gsap-nuxt.vercel.app/usage/modifiers#entrance)
and [custom presets](https://v-gsap-nuxt.vercel.app/usage/presets)
- 🧩 Full GSAP
[Plugin extensibility](https://v-gsap-nuxt.vercel.app/information/gsap-plugins)
## Installation
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 ✨
### Want to use it with Vue? [Learn about Vue usage](https://v-gsap-nuxt.vercel.app/installation/vue.only)
## Docs
### 👁️ Find the full docs and examples here: [Documentation](https://v-gsap-nuxt.vercel.app/)
---
### GSAP Licensing
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](https://gsap.com/community/standard-license/).
This module itself is licensed under the MIT License.
---
## Contribution
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