@hypernym/nuxt-gsap

Nuxt Gsap Module

GSAP module for Nuxt.

Features

• Helps you integrate the GSAP animation library
• Provides a solution for global use
• 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

npm i -D @hypernym/nuxt-gsap

1. Enable the module in the main config file

// nuxt.config.ts

{
  modules: ['@hypernym/nuxt-gsap']
}

That's it! Start developing your app!

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.

<!-- 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>

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.

// nuxt.config.ts

{
  modules: ['@hypernym/nuxt-gsap'],

  gsap: {
    // Module options
  }
}

GSAP Core

GSAP core is enabled by default on module activation.

// nuxt.config.ts

{
  modules: ['@hypernym/nuxt-gsap'],
}

Available globally

const { $gsap } = useNuxtApp()

$gsap.to('.box', { rotation: 27, x: 100, duration: 1 })

Extra Plugins

Specifies GSAP extra plugins.

Flip

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    extraPlugins: {
      flip: true
    }
  }
}

Available globally

const { $Flip } = useNuxtApp()

ScrollTrigger

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    extraPlugins: {
      scrollTrigger: true
    }
  }
}

Available globally

const { $ScrollTrigger } = useNuxtApp()

Observer

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    extraPlugins: {
      observer: true
    }
  }
}

Available globally

const { $Observer } = useNuxtApp()

ScrollTo

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    extraPlugins: {
      scrollTo: true
    }
  }
}

Available globally

const { $ScrollToPlugin } = useNuxtApp()

Draggable

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    extraPlugins: {
      draggable: true
    }
  }
}

Available globally

const { $Draggable } = useNuxtApp()

Easel

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    extraPlugins: {
      easel: true
    }
  }
}

Available globally

const { $EaselPlugin } = useNuxtApp()

MotionPath

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    extraPlugins: {
      motionPath: true
    }
  }
}

Available globally

const { $MotionPathPlugin } = useNuxtApp()

Pixi

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    extraPlugins: {
      pixi: true
    }
  }
}

Available globally

const { $PixiPlugin } = useNuxtApp()

Text

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    extraPlugins: {
      text: true
    }
  }
}

Available globally

const { $TextPlugin } = useNuxtApp()

Extra Eases

Specifies GSAP extra eases.

ExpoScale

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    extraEases: {
      expoScale: true
    }
  }
}

Available globally

const { $ExpoScaleEase } = useNuxtApp()

Rough

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    extraEases: {
      rough: true
    }
  }
}

Available globally

const { $RoughEase } = useNuxtApp()

SlowMo

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    extraEases: {
      slowMo: true
    }
  }
}

Available globally

const { $SlowMo } = useNuxtApp()

Custom

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    extraEases: {
      custom: true
    }
  }
}

Available globally

const { $CustomEase } = useNuxtApp()

Register Effects

• Type: object[]
• Default: undefined

Provides an easy way to register global effects.

Once the effect is registered, it can be accessed directly on the gsap.effects object.

To avoid possible linting warnings, use // eslint-disable-next-line and // @ts-ignore comments.

// nuxt.config.ts

{
  gsap: {
    registerEffects: [
      {
        name: 'fade',
        defaults: {
          y: -100,
          opacity: 0,
          duration: 2
        },
        // eslint-disable-next-line
        // @ts-ignore
        effect: (targets, config) => {
          return gsap.to(targets, {
            y: config.y,
            opacity: config.opacity,
            duration: config.duration
          })
        }
      },
      {
        name: 'slideIn'
        // ...
      }
    ]
  }
}

Available globally

const { $gsap } = useNuxtApp()

$gsap.effects.fade('.class')
$gsap.effects.slideIn('#id')

Register Eases

• Type: object[]
• Default: undefined

Provides an easy way to register global eases.

Once the ease is registered, it can be accessed directly on the gsap animations.

// nuxt.config.ts

{
  gsap: {
    registerEases: [
      {
        name: 'customEase',
        ease: progress => {
          return progress // linear
        }
      },
      {
        name: 'customEase2'
        // ...
      }
    ]
  }
}

Available globally

const { $gsap } = useNuxtApp()

$gsap.to('.class', { x: 100, ease: 'customEase' })
$gsap.to('#id', { x: 200, ease: 'customEase2' })

Club Plugins

Specifies GSAP premium plugins.

This is only available to club members as it requires a paid license.

Keep in mind that premium plugins must be installed according to the official GSAP guidelines before use.

For more information about club plugins, check the official pages.

DrawSvg

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      drawSvg: true
    }
  }
}

Available globally

const { $DrawSVGPlugin } = useNuxtApp()

ScrollSmoother

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      scrollSmoother: true
    }
  }
}

Available globally

const { $ScrollSmoother } = useNuxtApp()

GsDevTools

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      gsDevTools: true
    }
  }
}

Available globally

const { $GSDevTools } = useNuxtApp()

Inertia

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      inertia: true
    }
  }
}

Available globally

const { $InertiaPlugin } = useNuxtApp()

MorphSvg

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      morphSvg: true
    }
  }
}

Available globally

const { $MorphSVGPlugin } = useNuxtApp()

MotionPathHelper

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      motionPathHelper: true
    }
  }
}

Available globally

const { $MotionPathHelper } = useNuxtApp()

Physics2d

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      physics2d: true
    }
  }
}

Available globally

const { $Physics2DPlugin } = useNuxtApp()

PhysicsProps

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      physicsProps: true
    }
  }
}

Available globally

const { $PhysicsPropsPlugin } = useNuxtApp()

ScrambleText

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      scrambleText: true
    }
  }
}

Available globally

const { $ScrambleText } = useNuxtApp()

SplitText

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      splitText: true
    }
  }
}

Available globally

const { $SplitText } = useNuxtApp()

CustomBounce

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      customBounce: true
    }
  }
}

Available globally

const { $CustomBounce } = useNuxtApp()

CustomWiggle

• Type: boolean
• Default: undefined

// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      customWiggle: true
    }
  }
}

Available globally

const { $CustomWiggle } = useNuxtApp()

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