GSAP module for Nuxt.js
npm install nuxt-gsap-moduleSince Nuxt migrates to the latest version, it's only a matter of time before they drop support for older versions.
This module still works normally in Nuxt 2, but will no longer be maintained properly. If you are planning a new project, I highly recommend using the latest updated version of the module.
The new @hypernym/nuxt-gsap module is optimized and supports Nuxt 3 with TypeScript.
Latest Module
---
GSAP module for Nuxt 2.
- 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
- Allows you to easily register global effects & eases
- Supports Club GreenSock premium plugins 🟢
- Zero-config setup ready to go 🚀
1. Install nuxt-gsap-module dependency to your project
``bash`
$ npm install --save-dev nuxt-gsap-module # or yarn add -D nuxt-gsap-module
2. Enable nuxt-gsap-module in the buildModules section
`js
// nuxt.config.js
export default {
buildModules: ['nuxt-gsap-module'],
gsap: {
/ Module Options /
}
}
`
That's it! Start developing your app!
`js
// index.vue
export default {
mounted() {
this.boxRotation()
},
methods: {
boxRotation() {
const gsap = this.$gsap
gsap.to('.box', { rotation: 27, x: 100, duration: 1 })
}
}
}
`
`js
// nuxt.config.js
export default {
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
})
}
}
}
`
After activation, plugins are automatically registered and available globally, so you won’t have to worry about it (applies to all plugins).
`js
// nuxt.config.js
export default {
gsap: {
extraPlugins: {
scrollTo: true,
scrollTrigger: true
},
extraEases: {
expoScaleEase: true
}
}
}
`
`js
// 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
}
})
}
}
}
`
Module allows you to easily animate elements via custom v-gsap directive and its modifiers.
- Modifier: v-gsap.set
- Default: true
` NUXT GSAPhtml`
- Modifier: v-gsap.to
- Default: true
`html`
rotation: 360,
x: 150,
duration: 2
}"
>
NUXT GSAP
- Modifier: v-gsap.from
- Default: true
`html`
opacity: 0,
x: -200,
duration: 1
}"
>
NUXT GSAP
- Modifier: v-gsap.fromTo
- Default: true
`html
{ opacity: 0, y: -350 },
{ opacity: 1, y: 0, duration: 3 }
]"
>
NUXT GSAP
Module Options
Here are all the
options that can be used for customization:`js
// nuxt.config.jsexport default {
gsap: {
extraPlugins: {},
extraEases: {},
clubPlugins: {},
registerEffect: [],
registerEase: []
}
}
`GSAP's core
$3
- Default:
GSAP's core is
by default so there is no need for additional configuration.`js
// nuxt.config.jsexport default {
buildModules: ['nuxt-gsap-module']
}
`Available globally
js
// Access GSAP by using
this.$gsap// or
const gsap = this.$gsap
gsap.to('.box', { rotation: 27, x: 100, duration: 1 })
`Register Effect
- Default:
This option allows you to easily register a global effect. Once the effect is registered, it can be accessed directly on the
object.`js
// nuxt.config.jsexport default {
gsap: {
registerEffect: [
{
name: 'fadeIn',
effect: (targets, config) => {
// ...
}
},
{
name: 'fadeOut',
effect: (targets, config) => {
// ...
}
},
{
name: 'fadeInOut',
effect: (targets, config) => {
// ...
}
}
]
}
}
`js
// Effects can be accessed as follows
this.$gsap.effects.fadeIn('.class')
this.$gsap.effects.fadeOut('#id')
this.$gsap.effects.fadeInOut(element)// or
const gsap = this.$gsap
gsap.effects.fadeIn('.class')
gsap.effects.fadeOut('#id')
gsap.effects.fadeInOut(element)
// or directly on timelines
let tl = this.$gsap.timeline()
tl.fadeIn('.class', { duration: 3 })
.fadeIn('#id', { duration: 1 }, '+=2')
.to('.class2', { x: 100 })
`Register Ease
- Default:
This option allows you to easily register a global ease.
js
// nuxt.config.jsexport default {
gsap: {
registerEase: [
{
name: 'myEase',
ease: progress => {
return progress // linear
}
},
{
name: 'ease.2',
ease: progress => {
// ...
}
},
{
name: 'customEase.3',
ease: progress => {
// ...
}
}
]
}
}
`html
Custom Title
Custom text...
`Extra Plugins
$3
- Default:
- Moved to public downloads ()`js
// nuxt.config.jsexport default {
gsap: {
extraPlugins: {
flip: true
}
}
}
`js
// Access the plugin by using
this.$Flip
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
extraPlugins: {
scrollTrigger: true
}
}
}
`js
// Access the plugin by using
this.$ScrollTrigger
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
extraPlugins: {
observer: true
}
}
}
`js
// Access the plugin by using
this.$Observer
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
extraPlugins: {
scrollTo: true
}
}
}
`js
// Access the plugin by using
this.$ScrollToPlugin
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
extraPlugins: {
draggable: true
}
}
}
`js
// Access the plugin by using
this.$Draggable
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
extraPlugins: {
easel: true
}
}
}
`js
// Access the plugin by using
this.$EaselPlugin
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
extraPlugins: {
motionPath: true
}
}
}
`js
// Access the plugin by using
this.$MotionPathPlugin
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
extraPlugins: {
pixi: true
}
}
}
`js
// Access the plugin by using
this.$PixiPlugin
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
extraPlugins: {
text: true
}
}
}
`js
// Access the plugin by using
this.$TextPlugin
`$3
- Deprecated (
)CSSRulePlugin has been
deprecated in favor of using CSS variables which have excellent browser support these days.GSAP has native support for animating CSS variables, like:
`js
this.$gsap.to('html', { '--my-variable': 100, duration: 2 })
`Extra Eases
$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
extraEases: {
expoScaleEase: true
}
}
}
`js
// Access the plugin by using
this.$ExpoScaleEase
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
extraEases: {
roughEase: true
}
}
}
`js
// Access the plugin by using
this.$RoughEase
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
extraEases: {
slowMo: true
}
}
}
`js
// Access the plugin by using
this.$SlowMo
`$3
- Default:
- Moved to public downloads ()`js
// nuxt.config.jsexport default {
gsap: {
extraEases: {
customEase: true
}
}
}
`js
// Access the plugin by using
this.$CustomEase
`Club GreenSock Plugins
supports Club GreenSock premium plugins. They can be easily activated via module settings, just like the free ones.Installation
1. Follow the official instructions and install the
premium plugins as usual.
2. After installation, simply activate the desired plugins and that's it, you're ready to go!$3
- Default:
falsejs
// nuxt.config.jsexport default {
gsap: {
clubPlugins: {
drawSVG: true
}
}
}
`js
// Access the plugin by using
this.$DrawSVGPlugin
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
clubPlugins: {
scrollSmoother: true
}
}
}
`js
// Access the plugin by using
this.$ScrollSmoother
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
clubPlugins: {
gsDevTools: true
}
}
}
`js
// Access the plugin by using
this.$GSDevTools
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
clubPlugins: {
inertia: true
}
}
}
`js
// Access the plugin by using
this.$InertiaPlugin
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
clubPlugins: {
morphSVG: true
}
}
}
`js
// Access the plugin by using
this.$MorphSVGPlugin
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
clubPlugins: {
motionPathHelper: true
}
}
}
`js
// Access the plugin by using
this.$MotionPathHelper
`$3
- Default:
js
// nuxt.config.js{
gsap: {
clubPlugins: {
physics2D: true
}
}
}
`js
// Access the plugin by using
this.$Physics2DPlugin
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
clubPlugins: {
physicsProps: true
}
}
}
`js
// Access the plugin by using
this.$PhysicsPropsPlugin
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
clubPlugins: {
scrambleText: true
}
}
}
`js
// Access the plugin by using
this.$ScrambleTextPlugin
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
clubPlugins: {
splitText: true
}
}
}
`js
// Access the plugin by using
this.$SplitText
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
clubPlugins: {
customBounce: true
}
}
}
`js
// Access the plugin by using
this.$CustomBounce
`$3
- Default:
js
// nuxt.config.jsexport default {
gsap: {
clubPlugins: {
customWiggle: true
}
}
}
`js
// Access the plugin by using
this.$CustomWiggle
``GSAP
Copyright (c) GreenSock
Nuxt GSAP module
Copyright (c) Ivo Dolenc