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
