GSAP Module for Nuxt.js

Nuxt GSAP Module

GSAP module for Nuxt.js

Features

• Helps you integrate GSAP javascript animation library
• Allows you to easily set options through the module
• Provides a solution for building high-performance animations that work in every major browser
• Includes zero-config setup ready to go
• and much more 🔥

Setup

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

$ npm install --save-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 */
  }
}

Examples

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

Simple box rotation

// index.vue

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

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

Multiple plugins usage example

// nuxt.config.js

{
  gsap: {
    extraPlugins: {
      scrollTo: true,
      scrollTrigger: true
    },
    extraEases: {
      expoScaleEase: true
    }
  }
}

// Usage

const gsap = this.$gsap
const ExpoScaleEase = this.$ExpoScaleEase
const ScrollToPlugin = this.$ScrollToPlugin
const ScrollTrigger = this.$ScrollTrigger

gsap.registerPlugin(ScrollToPlugin, ScrollTrigger, ExpoScaleEase)

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.

Available on both client-side and server-side

// nuxt.config.js

{
  buildModules: ['nuxt-gsap-module']
}

// Access GSAP by using
this.$gsap

// Rotate and move elements with a class of "box" over the course of 1 second
this.$gsap.to('.box', { rotation: 27, x: 100, duration: 1 })

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

Extra Plugins

cssRule

• Default: false

Available on client-side only

// nuxt.config.js

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

// Usage

const gsap = this.$gsap
const CSSRulePlugin = this.$CSSRulePlugin

gsap.registerPlugin(CSSRulePlugin)

More info

draggable

• Default: false

Available on client-side only

// nuxt.config.js

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

// Usage

const gsap = this.$gsap
const Draggable = this.$Draggable

gsap.registerPlugin(Draggable)

More info

easel

• Default: false

Available on client-side only

// nuxt.config.js

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

// Usage

const gsap = this.$gsap
const EaselPlugin = this.$EaselPlugin

gsap.registerPlugin(EaselPlugin)

More info

motionPath

• Default: false

Available on client-side only

// nuxt.config.js

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

// Usage

const gsap = this.$gsap
const MotionPathPlugin = this.$MotionPathPlugin

gsap.registerPlugin(MotionPathPlugin)

More info

pixi

• Default: false

Available on client-side only

// nuxt.config.js

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

// Usage

const gsap = this.$gsap
const PixiPlugin = this.$PixiPlugin

gsap.registerPlugin(PixiPlugin)

More info

text

• Default: false

Available on client-side only

// nuxt.config.js

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

// Usage

const gsap = this.$gsap
const TextPlugin = this.$TextPlugin

gsap.registerPlugin(TextPlugin)

More info

scrollTo

• Default: false

Available on client-side only

// nuxt.config.js

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

// Usage

const gsap = this.$gsap
const ScrollToPlugin = this.$ScrollToPlugin

gsap.registerPlugin(ScrollToPlugin)

More info

scrollTrigger

• Default: false

Available on client-side only

// nuxt.config.js

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

// Usage

const gsap = this.$gsap
const ScrollTrigger = this.$ScrollTrigger

gsap.registerPlugin(ScrollTrigger)

More info

Extra eases

expoScaleEase

• Default: false

Available on client-side only

// nuxt.config.js

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

// Usage

const gsap = this.$gsap
const ExpoScaleEase = this.$ExpoScaleEase

gsap.registerPlugin(ExpoScaleEase)

More info

roughEase

• Default: false

Available on client-side only

// nuxt.config.js

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

// Usage

const gsap = this.$gsap
const RoughEase = this.$RoughEase

gsap.registerPlugin(RoughEase)

More info

slowMo

• Default: false

Available on client-side only

// nuxt.config.js

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

// Usage

const gsap = this.$gsap
const SlowMo = this.$SlowMo

gsap.registerPlugin(SlowMo)

More info

Download Details:

Author: ivodolenc

Source Code: https://github.com/ivodolenc/nuxt-gsap-module

#vue #vuejs #nuxtjs #javascript