GSAP module for Nuxt.js

GSAP module for Nuxt.js

Nuxt GSAP Module 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
  1. 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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Veluxi Starter - Vue JS Landing Page Template .Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

nuxt-storyblok-boilerplate .Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

Classic Mini Cooper owners built with VueJS and NuxtJS

Classic Mini DIY is the best place to find all the reference material, how to videos, and much much more for your Classic Mini

Boilerplate with Foundations for Sites in NuxtJS

Nuxtation Boilerplate with Foundations for Sites in NuxtJS This repository is one example of how to integrate Foundation for Sites into the progressive Vue.js framework, the Nuxt.js project. A Foundation + NuxtJS project use webpack4 and babel7