Using ScrollTrigger in templates with v-gsap

[esadrian]

Hi, I wonder if it's possible to add scrollTrigger inside the v-gsap and how. I have tried without any success and can't find it on the docs.

gsap.from(".box", {
  opacity: 0,
  scrollTrigger: {
    start: "center center",
    end: "center center",
    trigger: ".trigger,
    markers: true,
  },
});

Use in templates

<div v-gsap.to="{ /* ... */ }"></div>

<div v-gsap.from="{ /* ... */ }"></div>

<div v-gsap.fromTo="[{ /* ... */ }, { /* ... */ }]"></div>

<div v-gsap.set="{ /* ... */ }"></div>

[ivodolenc]

Hi, yeah, it's possible.

Just activate ScrollTrigger before use and that's it.

// nuxt.config.js

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

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

Here is a simple example:

<template>
  <div>
    <section style="height: 150vh"></section>
    <h1
      class="title"
      v-gsap.to="{
        scrollTrigger: {
          trigger: '.title',
          start: 'center bottom',
          end: 'center top',
          scrub: true,
          markers: true
        },
        x: 500
      }"
    >
      Nuxt GSAP Module
    </h1>
    <section style="height: 150vh"></section>
  </div>
</template>

[ivodolenc]

But keep in mind if you use ScrollTrigger, you need to destroy the instance before changing routes to removing all scroll-related listeners, etc.

Maybe it's better to use it inside methods (I personally would do it that way) or write it directly inside mounted() hook to keep flexibility and it's easy to understand what's going on.

Docs:

• .kill()
• .getById()

Simple example:

<template>
  <div>
    <nuxt-link to="/about">About</nuxt-link>
    <section style="height: 150vh"></section>
    <h1 class="title">Nuxt GSAP Module</h1>
    <section style="height: 150vh"></section>
  </div>
</template>

<script>
  export default {
    methods: {
      customScrollTrigger() {
        this.$gsap.to('.title', {
          scrollTrigger: {
            id: 'title01', // Add unique Id
            trigger: '.title',
            start: 'center bottom',
            end: 'center top',
            scrub: true,
            markers: true
          },
          x: 500
        })
      }
    },

    mounted() {
      this.customScrollTrigger()
    },

    beforeDestroy() {
      // Returns the ScrollTrigger with unique Id
      // and kills it before route change
      this.$ScrollTrigger.getById('title01').kill()
    }
  }
</script>

[esadrian]

Hi! Thanks for the quick response, I'll gladly give this module a star! I enjoy using GSAP but I'm learning Nuxt and how to implement it correctly. Sorry if these questions are a bit pity hahaha.

I have created a Sandbox (My first one, I hope to link it correctly) to see this demo the animation works except the scrub. Any idea why?
https://codesandbox.io/s/example-for-navigation-dxglh?file=/pages/index.vue

[ivodolenc]

Read docs and try out simple step-by-step examples. Also, try to simplify the code. Create a component, animate it and import it where needed.

Here is a working example:

<template>
  <div>
    <NuxtLink to="/">Page 1</NuxtLink>
    <NuxtLink to="/about">Page 2</NuxtLink>

    <section style="min-height: 100vh; background: gray"></section>
    <h1 id="js-trigger">My list with v-gsap</h1>
    <ul>
      <li v-for="item in myList" :key="item" class="itemsA">
        {{ item }}
      </li>
    </ul>
    <section style="min-height: 100vh; background: gray"></section>
    <h1 id="js-trigger2">My list with gsap</h1>
    <ul>
      <li v-for="item in myList" :key="item" class="itemsB">
        {{ item }}
      </li>
    </ul>
    <section style="min-height: 100vh; background: gray"></section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myList: ['First', 'Second', 'Third']
    }
  },
  mounted() {
    this.firstTween()
    this.secondTween()
  },

  methods: {
    firstTween() {
      this.$gsap.to('.itemsA', {
        scrollTrigger: {
          id: 'firstTween',
          trigger: '#js-trigger',
          start: 'center 75%',
          end: 'center 75%',
          scrub: 1,
          markers: true
        },
        x: 300,
        opacity: 0,
        stagger: 0.1
      })
    },

    secondTween() {
      this.$gsap.fromTo(
        '.itemsB',
        {
          x: 300,
          opacity: 0,
          stagger: 0.1
        },
        {
          scrollTrigger: {
            id: 'secondTween',
            trigger: '#js-trigger2',
            start: 'center 75%',
            end: 'center 75%',
            scrub: 1,
            markers: true
          },
          x: 0,
          opacity: 1,
          stagger: 0.1
        }
      )
    }
  },

  beforeDestroy() {
    // Returns the ScrollTrigger with unique Id
    // and kills it before route change
    this.$ScrollTrigger.getById('firstTween').kill()
    this.$ScrollTrigger.getById('secondTween').kill()
  }
}
</script>