GSAP scrollTrigger and Nuxt Links

[paddywinc]

Hi All,

 

So I'm building something quite basic in Nuxt and using scrollTrigger to toggle a class on certain elements when they enter the viewport. 

 

I have seen some other threads on here about scrollTrigger not refreshing when using Nuxt Link and it looks like I need to add scrollTrigger.refresh() in here somewhere. 

 

This all works perfectly when I refresh the page, but when I navigate to another page, scrollTrigger doesn't work. 

 

I am calling GSAP via a plugin in nuxt/config like so:

 

   plugins: [
       { src: '~/plugins/gsap', ssr: false },
  ],

 

And my plugin file looks like this. 

 

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
 
if (process.client) {
    gsap.registerPlugin(ScrollTrigger);
}

console.log('gsap installed');

const sections = document.querySelectorAll('.window, .gummy');

    sections.forEach((section, index) => {
      gsap.to(section, {autoAlpha: 1,
        scrollTrigger: {
          trigger: section,
           start: 'top bottom',
            // end: 'bottom top',
          toggleActions: 'play none none reverse',
          // markers: true
        }
      });
      
      ScrollTrigger.create({
        trigger: section,
        id: index+1,
        start: 'top bottom',
        end: 'bottom top',
        toggleActions: 'play reverse none reverse',
        toggleClass: {targets: section, className: "is-active"},
        once:true
        // markers: true
      })
      
    })

 

 

Where can I add scrollTrigger().refresh or kill in the above code?

 

Thanks

Paddy

[elegantseagulls]

I'm not super familiar with Vue, but you'll want to do .kill() your ScrollTrigger instance when you change routes/switch pages (or you'll likely get duplicate ScrollTriggers, and some missing or non-added targets). Pretty sure you'll want to run this in the beforeDestroy hook: https://vuejs.org/v2/api/#beforeDestroy

[paddywinc]

Thank you, I'm not that familiar with Vue either, so currently trying to get my head around it and trying to implement things I do with WordPress sites I build. 

[OSUblake]

Nuxt development is widely different than WordPress. You're going to need to learn how to use Vue's lifecycle events to do such stuff. Animations/ScrollTriggers should be created in mounted and killed in beforeDestroy.

 

Here's a simple starter sandbox for Nuxt.

 

https://codesandbox.io/s/gsap-nuxt-starter-r5lkg?file=/pages/index.vue

 

ScrollTrigger might be off on page transitions if your pages have transition on them, so you may need to tap into Vue's JavaScript hooks for transitions.

 

 

[paddywinc]

I totally agree! Been quite the learning experience for me. 

 

I do have page transitions currently, I did get this working briefly by adding this 

 

destroyed (); {
            const scrollTriggersInstances = ScrollTrigger.getAll()
            scrollTriggersInstances.forEach(el => {
                if (el && el.kill) {
                    el.kill(false)
                }
            })
            this.animation.kill()
        }

 

But it stopped the page transitions

[OSUblake]

You can fork the starter sandbox I linked to above if you need help.