GSAP module for Nuxt.js
- Helps you integrate
GSAPjavascript animation library - Allows you to easily animate elements via custom
v-gsapdirective 🔥 - Provides a solution for global use via
this.$gsap - Automatically registers plugins after activation
Zero-configsetup ready to go 🚀
- Add
nuxt-gsap-moduledependency to your project
$ npm install --save-dev nuxt-gsap-module # or yarn add --dev nuxt-gsap-module- Add
nuxt-gsap-moduleto thebuildModulessection ofnuxt.config.js
// nuxt.config.js
export default {
buildModules: ['nuxt-gsap-module'],
gsap: {
/* module options */
}
}That's it! Start developing your app ✨
Here are some code examples
<!-- index.vue -->
<template>
<p v-gsap.set="{ x: 100, y: 50 }">NUXT GSAP</p>
</template><!-- index.vue -->
<template>
<h1
v-gsap.to="{
rotation: 360,
x: 150,
duration: 2
}"
>
NUXT GSAP
</h1>
</template><!-- index.vue -->
<template>
<span
v-gsap.from="{
opacity: 0,
x: -200,
duration: 1
}"
>
NUXT GSAP
</span>
</template><!-- index.vue -->
<template>
<p
v-gsap.fromTo="[
{ opacity: 0, y: -350 },
{ opacity: 1, y: 0, duration: 3 }
]"
>
NUXT GSAP
</p>
</template>// index.vue
{
mounted() {
this.boxRotation()
},
methods: {
boxRotation() {
const gsap = this.$gsap
gsap.to('.box', { rotation: 27, x: 100, duration: 1 })
}
}
}// nuxt.config.js
{
// Enable module
buildModules: ['nuxt-gsap-module'],
// Add global page transition
pageTransition: {
name: 'page',
mode: 'out-in',
css: false,
beforeEnter(el) {
this.$gsap.set(el, {
opacity: 0
})
},
enter(el, done) {
this.$gsap.to(el, {
opacity: 1,
duration: 0.5,
ease: 'power2.inOut',
onComplete: done
})
},
leave(el, done) {
this.$gsap.to(el, {
opacity: 0,
duration: 0.5,
ease: 'power2.inOut',
onComplete: done
})
}
}
}✅ The module automatically registers plugins globally (after plugin activation in the settings), so you won’t have to worry about it (applies to all plugins).
// nuxt.config.js
{
gsap: {
extraPlugins: {
/**
* When you enable them, plugins are
* automatically registered and available globally
*/
scrollTo: true,
scrollTrigger: true
},
extraEases: {
expoScaleEase: true
}
}
}// Usage
export default {
mounted() {
this.animateOnScroll()
},
methods: {
animateOnScroll() {
this.$gsap.to(window, { duration: 2, scrollTo: 1000 })
this.$gsap.to('.box', {
x: 500,
ease: 'Power1.easeInOut',
scrollTrigger: {
trigger: '.content',
pin: true,
end: 'bottom',
scrub: true
}
})
}
}
}Default options
// nuxt.config.js
{
gsap: {
extraPlugins: {
cssRule: false,
draggable: false,
easel: false,
motionPath: false,
pixi: false,
text: false,
scrollTo: false,
scrollTrigger: false
},
extraEases: {
expoScaleEase: false,
roughEase: false,
slowMo: false,
}
}
}- Default:
true
✅ GSAP's core is enabled by default so there is no need for additional configuration.
// nuxt.config.js
{
buildModules: ['nuxt-gsap-module']
}Available globally
// Access GSAP by using
this.$gsap
// or
const gsap = this.$gsap
gsap.to('.box', { rotation: 27, x: 100, duration: 1 })Use in templates
<div v-gsap.to="{ /* ... */ }"></div><div v-gsap.from="{ /* ... */ }"></div><div v-gsap.fromTo="[{ /* ... */ }, { /* ... */ }]"></div><div v-gsap.set="{ /* ... */ }"></div>- Default:
false
// nuxt.config.js
{
gsap: {
extraPlugins: {
cssRule: true
}
}
}// Access the plugin by using
this.$CSSRulePlugin- Default:
false
// nuxt.config.js
{
gsap: {
extraPlugins: {
draggable: true
}
}
}// Access the plugin by using
this.$Draggable- Default:
false
// nuxt.config.js
{
gsap: {
extraPlugins: {
easel: true
}
}
}// Access the plugin by using
this.$EaselPlugin- Default:
false
// nuxt.config.js
{
gsap: {
extraPlugins: {
motionPath: true
}
}
}// Access the plugin by using
this.$MotionPathPlugin- Default:
false
// nuxt.config.js
{
gsap: {
extraPlugins: {
pixi: true
}
}
}// Access the plugin by using
this.$PixiPlugin- Default:
false
// nuxt.config.js
{
gsap: {
extraPlugins: {
text: true
}
}
}// Access the plugin by using
this.$TextPlugin- Default:
false
// nuxt.config.js
{
gsap: {
extraPlugins: {
scrollTo: true
}
}
}// Access the plugin by using
this.$ScrollToPlugin- Default:
false
// nuxt.config.js
{
gsap: {
extraPlugins: {
scrollTrigger: true
}
}
}// Access the plugin by using
this.$ScrollTrigger- Default:
false
// nuxt.config.js
{
gsap: {
extraEases: {
expoScaleEase: true
}
}
}// Access the plugin by using
this.$ExpoScaleEase- Default:
false
// nuxt.config.js
{
gsap: {
extraEases: {
roughEase: true
}
}
}// Access the plugin by using
this.$RoughEase- Default:
false
// nuxt.config.js
{
gsap: {
extraEases: {
slowMo: true
}
}
}// Access the plugin by using
this.$SlowMoGSAP
For more information, check the official GSAP site.
Copyright (c) GreenSock
Nuxt GSAP module
Copyright (c) Ivo Dolenc
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent