Norway Porridge Makers

    nuxt-gsap-module

    1.7.1 • Public • Published

    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

    1. Install nuxt-gsap-module dependency to your project
    $ npm install --save-dev nuxt-gsap-module # or yarn add -D nuxt-gsap-module
    1. 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

    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

    Install

    npm i nuxt-gsap-module

    DownloadsWeekly Downloads

    3,832

    Version

    1.7.1

    License

    MIT

    Unpacked Size

    24.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • ivodolenc