How to initialize new plugin objects about nuxt-gsap

[ivodolenc]

Hi, you can access the plugin by using this.$ScrollTrigger. For more info, check the ScrollTrigger section in the docs.

ScrollTrigger.create()

Enable nuxt-gsap-module and activate scrollTrigger plugin.

// nuxt.config.js

export default {
  buildModules: ['nuxt-gsap-module'],

  gsap: {
    extraPlugins: {
      scrollTrigger: true
    }
  }
}

You can then use it as usual.

<!-- index.vue -->

<template>
  <div>
    <section class="section blue">
      <p>Nuxt GSAP Module</p>
    </section>
    <section class="section orange">
      <p class="orange-content">Nuxt GSAP Module</p>
    </section>
    <section class="section green">
      <p>Nuxt GSAP Module</p>
    </section>
  </div>
</template>

<script>
  export default {
    mounted() {
      // this.$ScrollTrigger.create({ ... })

      // or
      const ScrollTrigger = this.$ScrollTrigger

      ScrollTrigger.create({
        trigger: '.orange',
        start: 'top top',
        end: 'bottom 200px',
        pin: '.orange-content'
      })
    }
  }
</script>

<style>
  .section {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    font-size: 3rem;
    color: white;
    font-weight: 700;
  }

  .blue {
    background-color: blue;
  }

  .orange {
    background-color: orange;
  }

  .green {
    background-color: green;
  }
</style>

[ivodolenc]

Closing this as resolved.