nuxt-gsap-module

Notice!!!

Since Nuxt migrates to the latest version, it's only a matter of time before they drop support for older versions.

This module still works normally in Nuxt 2, but will no longer be maintained properly. If you are planning a new project, I highly recommend using the latest updated version of the module.

The new @hypernym/nuxt-gsap module is optimized and supports Nuxt 3 with TypeScript.

_{Latest Module}

@hypernym/nuxt-gsap

---

Nuxt Gsap Module

GSAP module for Nuxt 2.

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

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

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

2. 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!

Simple box rotation

// index.vue

export default {
  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

export default {
  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

export default {
  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

export default {
  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

export default {
  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

export default {
  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

export default {
  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

Flip

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

// nuxt.config.js

export default {
  gsap: {
    extraPlugins: {
      flip: true
    }
  }
}

// Access the plugin by using
this.$Flip

More info

ScrollTrigger

• Default: false

// nuxt.config.js

export default {
  gsap: {
    extraPlugins: {
      scrollTrigger: true
    }
  }
}

// Access the plugin by using
this.$ScrollTrigger

More info

Observer

• Default: false

// nuxt.config.js

export default {
  gsap: {
    extraPlugins: {
      observer: true
    }
  }
}

// Access the plugin by using
this.$Observer

More info

ScrollToPlugin

• Default: false

// nuxt.config.js

export default {
  gsap: {
    extraPlugins: {
      scrollTo: true
    }
  }
}

// Access the plugin by using
this.$ScrollToPlugin

More info

Draggable

• Default: false

// nuxt.config.js

export default {
  gsap: {
    extraPlugins: {
      draggable: true
    }
  }
}

// Access the plugin by using
this.$Draggable

More info

EaselPlugin

• Default: false

// nuxt.config.js

export default {
  gsap: {
    extraPlugins: {
      easel: true
    }
  }
}

// Access the plugin by using
this.$EaselPlugin

More info

MotionPathPlugin

• Default: false

// nuxt.config.js

export default {
  gsap: {
    extraPlugins: {
      motionPath: true
    }
  }
}

// Access the plugin by using
this.$MotionPathPlugin

More info

PixiPlugin

• Default: false

// nuxt.config.js

export default {
  gsap: {
    extraPlugins: {
      pixi: true
    }
  }
}

// Access the plugin by using
this.$PixiPlugin

More info

TextPlugin

• Default: false

// nuxt.config.js

export default {
  gsap: {
    extraPlugins: {
      text: true
    }
  }
}

// Access the plugin by using
this.$TextPlugin

More info

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

Extra Eases

ExpoScaleEase

• Default: false

// nuxt.config.js

export default {
  gsap: {
    extraEases: {
      expoScaleEase: true
    }
  }
}

// Access the plugin by using
this.$ExpoScaleEase

More info

RoughEase

• Default: false

// nuxt.config.js

export default {
  gsap: {
    extraEases: {
      roughEase: true
    }
  }
}

// Access the plugin by using
this.$RoughEase

More info

SlowMo

• Default: false

// nuxt.config.js

export default {
  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

export default {
  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

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!

DrawSVGPlugin

• Default: false

// nuxt.config.js

export default {
  gsap: {
    clubPlugins: {
      drawSVG: true
    }
  }
}

// Access the plugin by using
this.$DrawSVGPlugin

More info

ScrollSmoother

• Default: false

// nuxt.config.js

export default {
  gsap: {
    clubPlugins: {
      scrollSmoother: true
    }
  }
}

// Access the plugin by using
this.$ScrollSmoother

More info

GSDevTools

• Default: false

// nuxt.config.js

export default {
  gsap: {
    clubPlugins: {
      gsDevTools: true
    }
  }
}

// Access the plugin by using
this.$GSDevTools

More info

InertiaPlugin

• Default: false

// nuxt.config.js

export default {
  gsap: {
    clubPlugins: {
      inertia: true
    }
  }
}

// Access the plugin by using
this.$InertiaPlugin

More info

MorphSVGPlugin

• Default: false

// nuxt.config.js

export default {
  gsap: {
    clubPlugins: {
      morphSVG: true
    }
  }
}

// Access the plugin by using
this.$MorphSVGPlugin

More info

MotionPathHelper

• Default: false

// nuxt.config.js

export default {
  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

export default {
  gsap: {
    clubPlugins: {
      physicsProps: true
    }
  }
}

// Access the plugin by using
this.$PhysicsPropsPlugin

More info

ScrambleTextPlugin

• Default: false

// nuxt.config.js

export default {
  gsap: {
    clubPlugins: {
      scrambleText: true
    }
  }
}

// Access the plugin by using
this.$ScrambleTextPlugin

More info

SplitText

• Default: false

// nuxt.config.js

export default {
  gsap: {
    clubPlugins: {
      splitText: true
    }
  }
}

// Access the plugin by using
this.$SplitText

More info

CustomBounce

• Default: false

// nuxt.config.js

export default {
  gsap: {
    clubPlugins: {
      customBounce: true
    }
  }
}

// Access the plugin by using
this.$CustomBounce

More info

CustomWiggle

• Default: false

// nuxt.config.js

export default {
  gsap: {
    clubPlugins: {
      customWiggle: true
    }
  }
}

// Access the plugin by using
this.$CustomWiggle

More info

License

GSAP

GSAP License

Copyright (c) GreenSock

Nuxt GSAP module

MIT License

Copyright (c) Ivo Dolenc