@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()
booleanundefined// nuxt.config.ts
{
gsap: {
extraEases: {
rough: true
}
}
}
Available globally
const { $RoughEase } = useNuxtApp()
booleanundefined// nuxt.config.ts
{
gsap: {
extraEases: {
slowMo: true
}
}
}
Available globally
const { $SlowMo } = useNuxtApp()
booleanundefined// nuxt.config.ts
{
gsap: {
extraEases: {
custom: true
}
}
}
Available globally
const { $CustomEase } = useNuxtApp()
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()
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
scrollSmoother: true
}
}
}
Available globally
const { $ScrollSmoother } = useNuxtApp()
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
gsDevTools: true
}
}
}
Available globally
const { $GSDevTools } = useNuxtApp()
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
inertia: true
}
}
}
Available globally
const { $InertiaPlugin } = useNuxtApp()
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
morphSvg: true
}
}
}
Available globally
const { $MorphSVGPlugin } = useNuxtApp()
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
motionPathHelper: true
}
}
}
Available globally
const { $MotionPathHelper } = useNuxtApp()
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
physics2d: true
}
}
}
Available globally
const { $Physics2DPlugin } = useNuxtApp()
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
physicsProps: true
}
}
}
Available globally
const { $PhysicsPropsPlugin } = useNuxtApp()
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
scrambleText: true
}
}
}
Available globally
const { $ScrambleText } = useNuxtApp()
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
splitText: true
}
}
}
Available globally
const { $SplitText } = useNuxtApp()
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
customBounce: true
}
}
}
Available globally
const { $CustomBounce } = useNuxtApp()
booleanundefined// nuxt.config.ts
{
gsap: {
clubPlugins: {
customWiggle: true
}
}
}
Available globally
const { $CustomWiggle } = useNuxtApp()
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 638 weekly downloads. As such, @hypernym/nuxt-gsap popularity was classified as not 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
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools oft miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.