README

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
Allows you to easily register global effects & eases
Supports Club GreenSock premium plugins 🟢
Zero-config setup ready to go 🚀

Quick Start

Install nuxt-gsap-module dependency to your project

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

Enable nuxt-gsap-module in the buildModules section

// nuxt.config.js

export default {
  buildModules: ['nuxt-gsap-module'],

  gsap: {
    /* Module Options */
  }
}

That's it! Start developing your app!

Examples

Here are some code examples

Simple box rotation

// index.vue

{
  mounted() {
    this.boxRotation()
  },

  methods: {
    boxRotation() {
      const gsap = this.$gsap
      gsap.to('.box', { rotation: 27, x: 100, duration: 1 })
    }
  }
}

Nuxt global page transitions

// nuxt.config.js

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

Multiple plugins

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

// nuxt.config.js

{
  gsap: {
    extraPlugins: {
      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
        }
      })
    }
  }
}

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

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

More info

gsap.to()

Modifier: v-gsap.to
Default: true

<template>
  <h1
    v-gsap.to="{
      rotation: 360,
      x: 150,
      duration: 2
    }"
  >
    NUXT GSAP
  </h1>
</template>

More info

gsap.from()

Modifier: v-gsap.from
Default: true

<template>
  <span
    v-gsap.from="{
      opacity: 0, 
      x: -200, 
      duration: 1
    }"
  >
    NUXT GSAP
  </span>
</template>

More info

gsap.fromTo()

Modifier: v-gsap.fromTo
Default: true

<template>
  <p
    v-gsap.fromTo="[
      { opacity: 0, y: -350 },
      { opacity: 1, y: 0, duration: 3 }
    ]"
  >
    NUXT GSAP
  </p>
</template>

More info

Module Options

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

// nuxt.config.js

{
  gsap: {
    extraPlugins: {},
    extraEases: {},
    clubPlugins: {},
    registerEffect: [],
    registerEase: [],
  }
}

GSAP's core

$gsap

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

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.

// nuxt.config.js

{
  gsap: {
    registerEffect: [
      {
        name: 'fadeIn',
        effect: (targets, config) => {
          // ...
        }
      },
      {
        name: 'fadeOut',
        effect: (targets, config) => {
          // ...
        }
      },
      {
        name: 'fadeInOut',
        effect: (targets, config) => {
          // ...
        }
      }
    ]
  }
}

// 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 })

More info

Register Ease

Default: []

This option allows you to easily register a global ease.

// nuxt.config.js

{
  gsap: {
    registerEase: [
      {
        name: 'myEase',
        ease: progress => {
          return progress // linear
        }
      },
      {
        name: 'ease.2',
        ease: progress => {
          // ...
        }
      },
      {
        name: 'customEase.3',
        ease: progress => {
          // ...
        }
      }
    ]
  }
}

<!-- index.vue -->

<template>
  <div>
    <h1 to="/about" class="title">Custom Title</h1>
    <p class="text">Custom text...</p>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.$gsap.to('.title', { x: 100, ease: 'myEase' })
      this.$gsap.to('.text', { y: 100, ease: 'ease.2' })
    }
  }
</script>

More info

Extra Plugins

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:

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

More info

Flip

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

// nuxt.config.js

{
  gsap: {
    extraPlugins: {
      flip: true
    }
  }
}

// Access the plugin by using
this.$Flip

More info

Draggable

Default: false

// nuxt.config.js

{
  gsap: {
    extraPlugins: {
      draggable: true
    }
  }
}

// Access the plugin by using
this.$Draggable

More info

EaselPlugin

Default: false

// nuxt.config.js

{
  gsap: {
    extraPlugins: {
      easel: true
    }
  }
}

// Access the plugin by using
this.$EaselPlugin

More info

MotionPathPlugin

Default: false

// nuxt.config.js

{
  gsap: {
    extraPlugins: {
      motionPath: true
    }
  }
}

// Access the plugin by using
this.$MotionPathPlugin

More info

PixiPlugin

Default: false

// nuxt.config.js

{
  gsap: {
    extraPlugins: {
      pixi: true
    }
  }
}

// Access the plugin by using
this.$PixiPlugin

More info

TextPlugin

Default: false

// nuxt.config.js

{
  gsap: {
    extraPlugins: {
      text: true
    }
  }
}

// Access the plugin by using
this.$TextPlugin

More info

ScrollToPlugin

Default: false

// nuxt.config.js

{
  gsap: {
    extraPlugins: {
      scrollTo: true
    }
  }
}

// Access the plugin by using
this.$ScrollToPlugin

More info

ScrollTrigger

Default: false

// nuxt.config.js

{
  gsap: {
    extraPlugins: {
      scrollTrigger: true
    }
  }
}

// Access the plugin by using
this.$ScrollTrigger

More info

Extra Eases

ExpoScaleEase

Default: false

// nuxt.config.js

{
  gsap: {
    extraEases: {
      expoScaleEase: true
    }
  }
}

// Access the plugin by using
this.$ExpoScaleEase

More info

RoughEase

Default: false

// nuxt.config.js

{
  gsap: {
    extraEases: {
      roughEase: true
    }
  }
}

// Access the plugin by using
this.$RoughEase

More info

SlowMo

Default: false

// nuxt.config.js

{
  gsap: {
    extraEases: {
      slowMo: true
    }
  }
}

// Access the plugin by using
this.$SlowMo

More info

CustomEase

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

// nuxt.config.js

{
  gsap: {
    extraEases: {
      customEase: true
    }
  }
}

// Access the plugin by using
this.$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

Follow the official instructions and install the premium plugins as usual.
After installation, simply activate the desired plugins and that's it, you're ready to go!

CustomBounce

Default: false

// nuxt.config.js

{
  gsap: {
    clubPlugins: {
      customBounce: true
    }
  }
}

// Access the plugin by using
this.$CustomBounce

More info

CustomWiggle

Default: false

// nuxt.config.js

{
  gsap: {
    clubPlugins: {
      customWiggle: true
    }
  }
}

// Access the plugin by using
this.$CustomWiggle

More info

DrawSVGPlugin

Default: false

// nuxt.config.js

{
  gsap: {
    clubPlugins: {
      drawSVG: true
    }
  }
}

// Access the plugin by using
this.$DrawSVGPlugin

More info

GSDevTools

Default: false

// nuxt.config.js

{
  gsap: {
    clubPlugins: {
      gsDevTools: true
    }
  }
}

// Access the plugin by using
this.$GSDevTools

More info

InertiaPlugin

Default: false

// nuxt.config.js

{
  gsap: {
    clubPlugins: {
      inertia: true
    }
  }
}

// Access the plugin by using
this.$InertiaPlugin

More info

MorphSVGPlugin

Default: false

// nuxt.config.js

{
  gsap: {
    clubPlugins: {
      morphSVG: true
    }
  }
}

// Access the plugin by using
this.$MorphSVGPlugin

More info

MotionPathHelper

Default: false

// nuxt.config.js

{
  gsap: {
    clubPlugins: {
      motionPathHelper: true
    }
  }
}

// Access the plugin by using
this.$MotionPathHelper

More info

Physics2DPlugin

Default: false

// nuxt.config.js

{
  gsap: {
    clubPlugins: {
      physics2D: true
    }
  }
}

// Access the plugin by using
this.$Physics2DPlugin

More info

PhysicsPropsPlugin

Default: false

// nuxt.config.js

{
  gsap: {
    clubPlugins: {
      physicsProps: true
    }
  }
}

// Access the plugin by using
this.$PhysicsPropsPlugin

More info

ScrambleTextPlugin

Default: false

// nuxt.config.js

{
  gsap: {
    clubPlugins: {
      scrambleText: true
    }
  }
}

// Access the plugin by using
this.$ScrambleTextPlugin

More info

SplitText

Default: false

// nuxt.config.js

{
  gsap: {
    clubPlugins: {
      splitText: true
    }
  }
}

// Access the plugin by using
this.$SplitText

More info

License

GSAP

GSAP License

Nuxt GSAP module

MIT License

Usage no npm install needed!

README

Nuxt GSAP Module

Features

Quick Start

Examples

Simple box rotation

Nuxt global page transitions

Multiple plugins

Custom Modifiers

gsap.set()

gsap.to()

gsap.from()

gsap.fromTo()

Module Options

GSAP's core

$gsap

Register Effect

Register Ease

Extra Plugins

CSSRulePlugin

Flip

Draggable

EaselPlugin

MotionPathPlugin

PixiPlugin

TextPlugin

ScrollToPlugin

ScrollTrigger

Extra Eases

ExpoScaleEase

RoughEase

SlowMo

CustomEase

Club GreenSock Plugins

CustomBounce

CustomWiggle

DrawSVGPlugin

GSDevTools

InertiaPlugin

MorphSVGPlugin

MotionPathHelper

Physics2DPlugin

PhysicsPropsPlugin

ScrambleTextPlugin

SplitText

License