@hypernym/nuxt-gsap
Advanced tools
GSAP module for Nuxt.
@hypernym/nuxt-gsap to your projectnpm i -D @hypernym/nuxt-gsap
// 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
}
}
<!-- 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'
booleantrueProvides the main $gsap core with plugins globally.
// nuxt.config.ts
{
gsap: {
provide: true
}
}
Available globally
const { $gsap } = useNuxtApp()
$gsap.to('.class', { rotation: 3, x: 100, duration: 1 })
booleanundefinedSpecifies custom composables.
If enabled, allows the use of custom composables.
// nuxt.config.ts
{
gsap: {
composables: true
}
}
It is possible to use provide helper and composables in combination or separately, depending on preference.
When using only composables, it is recommended to disable global import.
// nuxt.config.ts
{
gsap: {
composables: true
provide: false // global import
}
}
booleantrueSpecifies the auto-import feature.
If enabled, the composables will be available globally so there is no need to import them manually.
Since this is an opinionated feature, you can disable global auto-import and use explicit import only where you need it.
[!NOTE]
Works only if the optioncomposables: trueis enabled.
// nuxt.config.ts
{
gsap: {
autoImport: false
}
}
object[]undefinedProvides 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')
object[]undefinedProvides 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' })
objectundefinedSpecifies GSAP extra plugins.
booleanundefined// nuxt.config.ts
{
gsap: {
extraPlugins: {
flip: true
}
}
}
Available globally
const { $Flip } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
flip: true
}
}
}
Usage
useFlip
// Explicit import (optional)
import { useFlip } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
extraPlugins: {
scrollTrigger: true
}
}
}
Available globally
const { $ScrollTrigger } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
scrollTrigger: true
}
}
}
Usage
useScrollTrigger
// Explicit import (optional)
import { useScrollTrigger } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
extraPlugins: {
observer: true
}
}
}
Available globally
const { $Observer } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
observer: true
}
}
}
Usage
useObserver
// Explicit import (optional)
import { useObserver } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
extraPlugins: {
scrollTo: true
}
}
}
Available globally
const { $ScrollToPlugin } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
scrollTo: true
}
}
}
Usage
useScrollToPlugin
// Explicit import (optional)
import { useScrollToPlugin } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
extraPlugins: {
draggable: true
}
}
}
Available globally
const { $Draggable } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
draggable: true
}
}
}
Usage
useDraggable
// Explicit import (optional)
import { useDraggable } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
extraPlugins: {
easel: true
}
}
}
Available globally
const { $EaselPlugin } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
easel: true
}
}
}
Usage
useEaselPlugin
// Explicit import (optional)
import { useEaselPlugin } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
extraPlugins: {
motionPath: true
}
}
}
Available globally
const { $MotionPathPlugin } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
motionPath: true
}
}
}
Usage
useMotionPathPlugin
// Explicit import (optional)
import { useMotionPathPlugin } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
extraPlugins: {
pixi: true
}
}
}
Available globally
const { $PixiPlugin } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
pixi: true
}
}
}
Usage
usePixiPlugin
// Explicit import (optional)
import { usePixiPlugin } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
extraPlugins: {
text: true
}
}
}
Available globally
const { $TextPlugin } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
text: true
}
}
}
Usage
useTextPlugin
// Explicit import (optional)
import { useTextPlugin } from '#gsap'
objectundefinedSpecifies GSAP extra eases.
booleanundefined// nuxt.config.ts
{
gsap: {
extraEases: {
expoScale: true
}
}
}
Available globally
const { $ExpoScaleEase } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
extraEases: {
expoScale: true
}
}
}
Usage
useExpoScaleEase
// Explicit import (optional)
import { useExpoScaleEase } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
extraEases: {
rough: true
}
}
}
Available globally
const { $RoughEase } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
extraEases: {
rough: true
}
}
}
Usage
useRoughEase
// Explicit import (optional)
import { useRoughEase } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
extraEases: {
slowMo: true
}
}
}
Available globally
const { $SlowMo } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
extraEases: {
slowMo: true
}
}
}
Usage
useSlowMo
// Explicit import (optional)
import { useSlowMo } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
extraEases: {
custom: true
}
}
}
Available globally
const { $CustomEase } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
extraEases: {
custom: true
}
}
}
Usage
useCustomEase
// Explicit import (optional)
import { useCustomEase } from '#gsap'
objectundefinedSpecifies 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.
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
drawSvg: true
}
}
}
Available globally
const { $DrawSVGPlugin } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
drawSvg: true
}
}
}
Usage
useDrawSVGPlugin
// Explicit import (optional)
import { useDrawSVGPlugin } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
scrollSmoother: true
}
}
}
Available globally
const { $ScrollSmoother } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
scrollSmoother: true
}
}
}
Usage
useScrollSmoother
// Explicit import (optional)
import { useScrollSmoother } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
gsDevTools: true
}
}
}
Available globally
const { $GSDevTools } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
gsDevTools: true
}
}
}
Usage
useGSDevTools
// Explicit import (optional)
import { useGSDevTools } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
inertia: true
}
}
}
Available globally
const { $InertiaPlugin } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
inertia: true
}
}
}
Usage
useInertiaPlugin
// Explicit import (optional)
import { useInertiaPlugin } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
morphSvg: true
}
}
}
Available globally
const { $MorphSVGPlugin } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
morphSvg: true
}
}
}
Usage
useMorphSVGPlugin
// Explicit import (optional)
import { useMorphSVGPlugin } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
motionPathHelper: true
}
}
}
Available globally
const { $MotionPathHelper } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
motionPathHelper: true
}
}
}
Usage
useMotionPathHelper
// Explicit import (optional)
import { useMotionPathHelper } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
physics2d: true
}
}
}
Available globally
const { $Physics2DPlugin } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
physics2d: true
}
}
}
Usage
usePhysics2DPlugin
// Explicit import (optional)
import { usePhysics2DPlugin } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
physicsProps: true
}
}
}
Available globally
const { $PhysicsPropsPlugin } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
physicsProps: true
}
}
}
Usage
usePhysicsPropsPlugin
// Explicit import (optional)
import { usePhysicsPropsPlugin } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
scrambleText: true
}
}
}
Available globally
const { $ScrambleText } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
scrambleText: true
}
}
}
Usage
useScrambleText
// Explicit import (optional)
import { useScrambleText } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
splitText: true
}
}
}
Available globally
const { $SplitText } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
splitText: true
}
}
}
Usage
useSplitText
// Explicit import (optional)
import { useSplitText } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
customBounce: true
}
}
}
Available globally
const { $CustomBounce } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
customBounce: true
}
}
}
Usage
useCustomBounce
// Explicit import (optional)
import { useCustomBounce } from '#gsap'
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
customWiggle: true
}
}
}
Available globally
const { $CustomWiggle } = useNuxtApp()
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
customWiggle: true
}
}
}
Usage
useCustomWiggle
// Explicit import (optional)
import { useCustomWiggle } from '#gsap'
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
FAQs
GSAP module for Nuxt.
The npm package @hypernym/nuxt-gsap receives a total of 1,347 weekly downloads. As such, @hypernym/nuxt-gsap popularity was classified as popular.
We found that @hypernym/nuxt-gsap demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.