GSAP module for Nuxt.js
- Helps you integrate
GSAP
javascript animation library - Allows you to easily animate elements via custom
v-gsap
directive π₯ - Provides a solution for global use via
this.$gsap
- Automatically registers plugins after activation
Zero-config
setup ready to go π
- Add
nuxt-gsap-module
dependency to your project
$ npm install --save-dev nuxt-gsap-module # or yarn add --dev nuxt-gsap-module
- Add
nuxt-gsap-module
to thebuildModules
section 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.$SlowMo
GSAP
For more information, check the official GSAP site.
Copyright (c) GreenSock
Nuxt GSAP module
Copyright (c) Ivo Dolenc