bd-nuxt-gsap-module

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

$ 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

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

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

Custom modifier: v-gsap.set

<!-- index.vue -->

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

More info

Custom modifier: v-gsap.to

<!-- index.vue -->

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

More info

Custom modifier: v-gsap.from

<!-- index.vue -->

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

More info

Custom modifier: v-gsap.fromTo

<!-- index.vue -->

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

More info

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

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

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

// nuxt.config.js

{
  gsap: {
    extraPlugins: {
      /**
       * After activation, 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
        }
      })
    }
  }
}

Options

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

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

Use in templates

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

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

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

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

Extra Plugins

cssRule

• Default: false

// nuxt.config.js

{
  gsap: {
    extraPlugins: {
      cssRule: true
    }
  }
}

// Access the plugin by using
this.$CSSRulePlugin

More info

draggable

• Default: false

// nuxt.config.js

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

// Access the plugin by using
this.$Draggable

More info

easel

• Default: false

// nuxt.config.js

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

// Access the plugin by using
this.$EaselPlugin

More info

motionPath

• Default: false

// nuxt.config.js

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

// Access the plugin by using
this.$MotionPathPlugin

More info

pixi

• Default: false

// nuxt.config.js

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

// Access the plugin by using
this.$PixiPlugin

More info

text

• Default: false

// nuxt.config.js

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

// Access the plugin by using
this.$TextPlugin

More info

scrollTo

• 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

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

// nuxt.config.js

{
  gsap: {
    clubPlugins: {
      customEase: true
    }
  }
}

// Access the plugin by using
this.$CustomEase

More info

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

drawSVG

• Default: false

// nuxt.config.js

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

// Access the plugin by using
this.$DrawSVGPlugin

More info

flip

• Default: false

// nuxt.config.js

{
  gsap: {
    clubPlugins: {
      flip: true
    }
  }
}

// Access the plugin by using
this.$Flip

More info

gsDevTools

• Default: false

// nuxt.config.js

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

// Access the plugin by using
this.$GSDevTools

More info

inertia

• Default: false

// nuxt.config.js

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

// Access the plugin by using
this.$InertiaPlugin

More info

morphSVG

• 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

physics2D

• Default: false

// nuxt.config.js

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

// Access the plugin by using
this.$Physics2DPlugin

More info

physicsProps

• Default: false

// nuxt.config.js

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

// Access the plugin by using
this.$PhysicsPropsPlugin

More info

scrambleText

• 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

For more information, check the official GSAP site.

GSAP License

Copyright (c) GreenSock

Nuxt GSAP module

MIT License

Copyright (c) Ivo Dolenc