[GSAP scrollTrigger and Nuxt Links]

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

[GSAP scrollTrigger and Nuxt Links]

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. 

[GSAP scrollTrigger and Nuxt Links]

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