Notice!!!

Since 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}

@hypernym/nuxt-gsap

---

Nuxt Gsap Module

GSAP module for Nuxt 2.

Features

• 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 🚀

Quick Start

1. Install nuxt-gsap-module dependency to your project

1$ npm install --save-dev nuxt-gsap-module # or yarn add -D nuxt-gsap-module

2. Enable nuxt-gsap-module in the buildModules section

1// nuxt.config.js
2
3export default {
4  buildModules: ['nuxt-gsap-module'],
5
6  gsap: {
7    /* Module Options */
8  }
9}

That's it! Start developing your app!

Simple box rotation

1// index.vue
2
3export default {
4  mounted() {
5    this.boxRotation()
6  },
7
8  methods: {
9    boxRotation() {
10      const gsap = this.$gsap
11      gsap.to('.box', { rotation: 27, x: 100, duration: 1 })
12    }
13  }
14}

Nuxt global page transitions

1// nuxt.config.js
2
3export default {
4  buildModules: ['nuxt-gsap-module'],
5
6  // Add global page transition
7  pageTransition: {
8    name: 'page',
9    mode: 'out-in',
10    css: false,
11
12    beforeEnter(el) {
13      this.$gsap.set(el, {
14        opacity: 0
15      })
16    },
17
18    enter(el, done) {
19      this.$gsap.to(el, {
20        opacity: 1,
21        duration: 0.5,
22        ease: 'power2.inOut',
23        onComplete: done
24      })
25    },
26
27    leave(el, done) {
28      this.$gsap.to(el, {
29        opacity: 0,
30        duration: 0.5,
31        ease: 'power2.inOut',
32        onComplete: done
33      })
34    }
35  }
36}

Multiple plugins

After activation, plugins are automatically registered and available globally, so you won’t have to worry about it (applies to all plugins).

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraPlugins: {
6      scrollTo: true,
7      scrollTrigger: true
8    },
9    extraEases: {
10      expoScaleEase: true
11    }
12  }
13}

1// Usage
2
3export default {
4  mounted() {
5    this.animateOnScroll()
6  },
7
8  methods: {
9    animateOnScroll() {
10      this.$gsap.to(window, { duration: 2, scrollTo: 1000 })
11
12      this.$gsap.to('.box', {
13        x: 500,
14        ease: 'Power1.easeInOut',
15        scrollTrigger: {
16          trigger: '.content',
17          pin: true,
18          end: 'bottom',
19          scrub: true
20        }
21      })
22    }
23  }
24}

Custom Modifiers

Module allows you to easily animate elements via custom v-gsap directive and its modifiers.

gsap.set()

• Modifier: v-gsap.set
• Default: true

1<template>
2  <p v-gsap.set="{ x: 100, y: 50 }">NUXT GSAP</p>
3</template>

More info

gsap.to()

• Modifier: v-gsap.to
• Default: true

1<template>
2  <h1
3    v-gsap.to="{
4      rotation: 360,
5      x: 150,
6      duration: 2
7    }"
8  >
9    NUXT GSAP
10  </h1>
11</template>

More info

gsap.from()

• Modifier: v-gsap.from
• Default: true

1<template>
2  <span
3    v-gsap.from="{
4      opacity: 0, 
5      x: -200, 
6      duration: 1
7    }"
8  >
9    NUXT GSAP
10  </span>
11</template>

More info

gsap.fromTo()

• Modifier: v-gsap.fromTo
• Default: true

1<template>
2  <p
3    v-gsap.fromTo="[
4      { opacity: 0, y: -350 },
5      { opacity: 1, y: 0, duration: 3 }
6    ]"
7  >
8    NUXT GSAP
9  </p>
10</template>

More info

Module Options

Here are all the default options that can be used for customization:

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraPlugins: {},
6    extraEases: {},
7    clubPlugins: {},
8    registerEffect: [],
9    registerEase: []
10  }
11}

GSAP's core

$gsap

• Default: true

GSAP's core is enabled by default so there is no need for additional configuration.

1// nuxt.config.js
2
3export default {
4  buildModules: ['nuxt-gsap-module']
5}

Available globally

1// Access GSAP by using
2this.$gsap
3
4// or
5const gsap = this.$gsap
6gsap.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 gsap.effects object.

1// nuxt.config.js
2
3export default {
4  gsap: {
5    registerEffect: [
6      {
7        name: 'fadeIn',
8        effect: (targets, config) => {
9          // ...
10        }
11      },
12      {
13        name: 'fadeOut',
14        effect: (targets, config) => {
15          // ...
16        }
17      },
18      {
19        name: 'fadeInOut',
20        effect: (targets, config) => {
21          // ...
22        }
23      }
24    ]
25  }
26}

1// Effects can be accessed as follows
2this.$gsap.effects.fadeIn('.class')
3this.$gsap.effects.fadeOut('#id')
4this.$gsap.effects.fadeInOut(element)
5
6// or
7const gsap = this.$gsap
8gsap.effects.fadeIn('.class')
9gsap.effects.fadeOut('#id')
10gsap.effects.fadeInOut(element)
11
12// or directly on timelines
13let tl = this.$gsap.timeline()
14tl.fadeIn('.class', { duration: 3 })
15  .fadeIn('#id', { duration: 1 }, '+=2')
16  .to('.class2', { x: 100 })

More info

Register Ease

• Default: []

This option allows you to easily register a global ease.

1// nuxt.config.js
2
3export default {
4  gsap: {
5    registerEase: [
6      {
7        name: 'myEase',
8        ease: progress => {
9          return progress // linear
10        }
11      },
12      {
13        name: 'ease.2',
14        ease: progress => {
15          // ...
16        }
17      },
18      {
19        name: 'customEase.3',
20        ease: progress => {
21          // ...
22        }
23      }
24    ]
25  }
26}

1<!-- index.vue -->
2
3<template>
4  <div>
5    <h1 to="/about" class="title">Custom Title</h1>
6    <p class="text">Custom text...</p>
7  </div>
8</template>
9
10<script>
11  export default {
12    mounted() {
13      this.$gsap.to('.title', { x: 100, ease: 'myEase' })
14      this.$gsap.to('.text', { y: 100, ease: 'ease.2' })
15    }
16  }
17</script>

More info

Extra Plugins

Flip

• Default: false
• Moved to public downloads (>=v1.6)

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraPlugins: {
6      flip: true
7    }
8  }
9}

1// Access the plugin by using
2this.$Flip

More info

ScrollTrigger

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraPlugins: {
6      scrollTrigger: true
7    }
8  }
9}

1// Access the plugin by using
2this.$ScrollTrigger

More info

Observer

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraPlugins: {
6      observer: true
7    }
8  }
9}

1// Access the plugin by using
2this.$Observer

More info

ScrollToPlugin

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraPlugins: {
6      scrollTo: true
7    }
8  }
9}

1// Access the plugin by using
2this.$ScrollToPlugin

More info

Draggable

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraPlugins: {
6      draggable: true
7    }
8  }
9}

1// Access the plugin by using
2this.$Draggable

More info

EaselPlugin

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraPlugins: {
6      easel: true
7    }
8  }
9}

1// Access the plugin by using
2this.$EaselPlugin

More info

MotionPathPlugin

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraPlugins: {
6      motionPath: true
7    }
8  }
9}

1// Access the plugin by using
2this.$MotionPathPlugin

More info

PixiPlugin

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraPlugins: {
6      pixi: true
7    }
8  }
9}

1// Access the plugin by using
2this.$PixiPlugin

More info

TextPlugin

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraPlugins: {
6      text: true
7    }
8  }
9}

1// Access the plugin by using
2this.$TextPlugin

More info

CSSRulePlugin

• Deprecated (>=v1.6)

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:

1this.$gsap.to('html', { '--my-variable': 100, duration: 2 })

More info

Extra Eases

ExpoScaleEase

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraEases: {
6      expoScaleEase: true
7    }
8  }
9}

1// Access the plugin by using
2this.$ExpoScaleEase

More info

RoughEase

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraEases: {
6      roughEase: true
7    }
8  }
9}

1// Access the plugin by using
2this.$RoughEase

More info

SlowMo

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraEases: {
6      slowMo: true
7    }
8  }
9}

1// Access the plugin by using
2this.$SlowMo

More info

CustomEase

• Default: false
• Moved to public downloads (>=v1.6)

1// nuxt.config.js
2
3export default {
4  gsap: {
5    extraEases: {
6      customEase: true
7    }
8  }
9}

1// Access the plugin by using
2this.$CustomEase

More info

Club GreenSock Plugins

nuxt-gsap-module 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!

DrawSVGPlugin

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    clubPlugins: {
6      drawSVG: true
7    }
8  }
9}

1// Access the plugin by using
2this.$DrawSVGPlugin

More info

ScrollSmoother

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    clubPlugins: {
6      scrollSmoother: true
7    }
8  }
9}

1// Access the plugin by using
2this.$ScrollSmoother

More info

GSDevTools

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    clubPlugins: {
6      gsDevTools: true
7    }
8  }
9}

1// Access the plugin by using
2this.$GSDevTools

More info

InertiaPlugin

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    clubPlugins: {
6      inertia: true
7    }
8  }
9}

1// Access the plugin by using
2this.$InertiaPlugin

More info

MorphSVGPlugin

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    clubPlugins: {
6      morphSVG: true
7    }
8  }
9}

1// Access the plugin by using
2this.$MorphSVGPlugin

More info

MotionPathHelper

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    clubPlugins: {
6      motionPathHelper: true
7    }
8  }
9}

1// Access the plugin by using
2this.$MotionPathHelper

More info

Physics2DPlugin

• Default: false

1// nuxt.config.js
2
3{
4  gsap: {
5    clubPlugins: {
6      physics2D: true
7    }
8  }
9}

1// Access the plugin by using
2this.$Physics2DPlugin

More info

PhysicsPropsPlugin

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    clubPlugins: {
6      physicsProps: true
7    }
8  }
9}

1// Access the plugin by using
2this.$PhysicsPropsPlugin

More info

ScrambleTextPlugin

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    clubPlugins: {
6      scrambleText: true
7    }
8  }
9}

1// Access the plugin by using
2this.$ScrambleTextPlugin

More info

SplitText

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    clubPlugins: {
6      splitText: true
7    }
8  }
9}

1// Access the plugin by using
2this.$SplitText

More info

CustomBounce

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    clubPlugins: {
6      customBounce: true
7    }
8  }
9}

1// Access the plugin by using
2this.$CustomBounce

More info

CustomWiggle

• Default: false

1// nuxt.config.js
2
3export default {
4  gsap: {
5    clubPlugins: {
6      customWiggle: true
7    }
8  }
9}

1// Access the plugin by using
2this.$CustomWiggle

More info

License

GSAP

GSAP License

Copyright (c) GreenSock

Nuxt GSAP module

MIT License

Copyright (c) Ivo Dolenc