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
• 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: {
      /**
       * When you enable them, 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

License

GSAP

For more information, check the official GSAP site.

GSAP License

Copyright (c) GreenSock

Nuxt GSAP module

MIT License

Copyright (c) Ivo Dolenc