GSAP module for Nuxt.
- Helps you integrate the GSAP animation library
- Provides a solution for global use
- Supports custom composables
- Automatically registers plugins after activation
- Allows you to easily register global effects & eases
- Supports Club GreenSock premium plugins
- Zero-config setup ready to go
- TypeScript friendly
- Super easy to use
- Install
@hypernym/nuxt-gsap
to your project
npm i -D @hypernym/nuxt-gsap
- Enable the module in the main config file
// nuxt.config.ts
{
modules: ['@hypernym/nuxt-gsap']
}
That's it!
The module comes with a zero-config setup so after activation it automatically adds the GSAP core and it is globally available without additional settings.
<!-- layout.vue | page.vue | component.vue -->
<template>
<div>
<h1 class="title">Nuxt Gsap</h1>
</div>
</template>
<script setup lang="ts">
const { $gsap } = useNuxtApp()
onMounted(() => {
$gsap.to('.title', { rotation: 3, x: 100, duration: 1 })
})
</script>
Nuxt Gsap Module is completely rewritten in TypeScript. It also improves the development experience with detailed descriptions, examples and code auto-completion.
After plugin activation, it is immediately available globally, so there is no need to manually import or register.
// nuxt.config.ts
{
modules: ['@hypernym/nuxt-gsap'],
gsap: {
// Module options
}
}
It can be used via a provide
helper that will be available globally or via a custom composable
that you can import where you need it.
GSAP core is enabled by default on module activation.
// nuxt.config.ts
{
modules: ['@hypernym/nuxt-gsap'],
}
Available globally
<script setup lang="ts">
const { $gsap } = useNuxtApp()
onMounted(() => {
$gsap.to('.title', { rotation: 3, x: 100, duration: 1 })
})
</script>
To disable the provide helper completely, set it to false
.
// nuxt.config.ts
{
gsap: {
provide: false
}
}
Imports the main gsap
core as custom composable.
To enable custom composables, set it to true
:
// nuxt.config.ts
{
gsap: {
composables: true
}
}
- Custom composable
<!-- layout.vue | page.vue | component.vue -->
<template>
<h1 class="title">Nuxt Gsap Module</h1>
</template>
<script setup lang="ts">
useGsap.to('.title', { rotation: 3, x: 100, duration: 1 })
</script>
// Explicit import (optional)
import { useGsap } from '#gsap'
Check the official docs for more info.
Feel free to use the official discussions for any additional questions.
More details about GSAP licenses can be found in the official repository.
Developed in 🇭🇷 Croatia
Released under the MIT license.
© Hypernym Studio