Nuxt GSAP Module

GSAP module for Nuxt.js

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
• Supports Club GreenSock premium plugins
• Zero-config setup ready to go 🚀

Quick Start

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

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

2. Add nuxt-gsap-module to the buildModules section of nuxt.config.js

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 ✨

Examples

Here are some code examples

• Basic
• Custom Directive
• Page Transitions
• Staggering
• Animate On Scroll

Custom modifier: v-gsap.set

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

More info

Custom modifier: v-gsap.to

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

More info

Custom modifier: v-gsap.from

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

More info

Custom modifier: v-gsap.fromTo

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

More info

Simple box rotation

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

Multiple plugins usage example

✅ 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).

1// nuxt.config.js
2
3{
4  gsap: {
5    extraPlugins: {
6      /**
7       * After activation, plugins are automatically
8       * registered and available globally
9       */
10      scrollTo: true,
11      scrollTrigger: true
12    },
13    extraEases: {
14      expoScaleEase: true
15    }
16  }
17}

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}

Options

Default options

1// nuxt.config.js
2
3{
4  gsap: {
5    extraPlugins: {
6      cssRule: false,
7      draggable: false,
8      easel: false,
9      motionPath: false,
10      pixi: false,
11      text: false,
12      scrollTo: false,
13      scrollTrigger: false
14    },
15    extraEases: {
16      expoScaleEase: false,
17      roughEase: false,
18      slowMo: false,
19    }
20  }
21}

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
3{
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 })

Use in templates

1<div v-gsap.to="{ /* ... */ }"></div>

1<div v-gsap.from="{ /* ... */ }"></div>

1<div v-gsap.fromTo="[{ /* ... */ }, { /* ... */ }]"></div>

1<div v-gsap.set="{ /* ... */ }"></div>

Extra Plugins

cssRule

• Default: false

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

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

More info

draggable

• Default: false

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

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

More info

easel

• Default: false

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

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

More info

motionPath

• Default: false

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

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

More info

pixi

• Default: false

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

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

More info

text

• Default: false

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

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

More info

scrollTo

• Default: false

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

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

More info

scrollTrigger

• Default: false

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

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

More info

Extra eases

expoScaleEase

• Default: false

1// nuxt.config.js
2
3{
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
3{
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
3{
4  gsap: {
5    extraEases: {
6      slowMo: true
7    }
8  }
9}

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

More info

Club GreenSock

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!

customEase

• Default: false

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

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

More info

customBounce

• Default: false

1// nuxt.config.js
2
3{
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
3{
4  gsap: {
5    clubPlugins: {
6      customWiggle: true
7    }
8  }
9}

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

More info

drawSVG

• Default: false

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

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

More info

flip

• Default: false

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

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

More info

gsDevTools

• Default: false

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

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

More info

inertia

• Default: false

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

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

More info

morphSVG

• Default: false

1// nuxt.config.js
2
3{
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
3{
4  gsap: {
5    clubPlugins: {
6      motionPathHelper: true
7    }
8  }
9}

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

More info

physics2D

• 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

physicsProps

• Default: false

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

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

More info

scrambleText

• Default: false

1// nuxt.config.js
2
3{
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
3{
4  gsap: {
5    clubPlugins: {
6      splitText: true
7    }
8  }
9}

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

More info

License

GSAP

For more information, check the official GSAP site.

GSAP License

Copyright (c) GreenSock

Nuxt GSAP module

MIT License

Copyright (c) Ivo Dolenc