Nuxt Gsap Module

GSAP module for Nuxt.

Features

• 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

Quick Start

1. Install @hypernym/nuxt-gsap to your project

1npm i -D @hypernym/nuxt-gsap

2. Enable the module in the main config file

1// nuxt.config.ts
2
3{
4  modules: ['@hypernym/nuxt-gsap']
5}

That's it!

Module

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.

1<!-- layout.vue | page.vue | component.vue -->
2
3<template>
4  <div>
5    <h1 class="title">Nuxt Gsap</h1>
6  </div>
7</template>
8
9<script setup lang="ts">
10  const { $gsap } = useNuxtApp()
11
12  onMounted(() => {
13    $gsap.to('.title', { rotation: 3, x: 100, duration: 1 })
14  })
15</script>

Options

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.

1// nuxt.config.ts
2
3{
4  modules: ['@hypernym/nuxt-gsap'],
5
6  gsap: {
7    // Module options
8  }
9}

GSAP Core

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.

Provide

GSAP core is enabled by default on module activation.

1// nuxt.config.ts
2
3{
4  modules: ['@hypernym/nuxt-gsap'],
5}

Available globally

1<script setup lang="ts">
2  const { $gsap } = useNuxtApp()
3
4  onMounted(() => {
5    $gsap.to('.title', { rotation: 3, x: 100, duration: 1 })
6  })
7</script>

To disable the provide helper completely, set it to false.

1// nuxt.config.ts
2
3{
4  gsap: {
5    provide: false
6  }
7}

Composable

Imports the main gsap core as custom composable.

To enable custom composables, set it to true:

1// nuxt.config.ts
2
3{
4  gsap: {
5    composables: true
6  }
7}

useGsap

• Custom composable

1<!-- layout.vue | page.vue | component.vue -->
2
3<template>
4  <h1 class="title">Nuxt Gsap Module</h1>
5</template>
6
7<script setup lang="ts">
8  useGsap.to('.title', { rotation: 3, x: 100, duration: 1 })
9</script>

1// Explicit import (optional)
2import { useGsap } from '#gsap'

Documentation

Check the official docs for more info.

Community

Feel free to use the official discussions for any additional questions.

License

Gsap Platform

More details about GSAP licenses can be found in the official repository.

Nuxt Gsap Module

Developed in 🇭🇷 Croatia

Released under the MIT license.

© Hypernym Studio