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

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

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!

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

Nuxt GSAP module

MIT License

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

ivodolenc / nuxt-gsap-module

Programming Languages

Labels

Projects that are alternatives of or similar to nuxt-gsap-module

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

Flip

ScrollTrigger

Observer

ScrollToPlugin

Draggable

EaselPlugin

MotionPathPlugin

PixiPlugin

TextPlugin

CSSRulePlugin

Extra Eases

ExpoScaleEase

RoughEase

SlowMo

CustomEase

Club GreenSock Plugins

DrawSVGPlugin

ScrollSmoother

GSDevTools

InertiaPlugin

MorphSVGPlugin

MotionPathHelper

Physics2DPlugin

PhysicsPropsPlugin

ScrambleTextPlugin

SplitText

CustomBounce

CustomWiggle

License