ScrollTrigger timeline clear not immediately working

[pdub]

I am using nuxt's npm gsap plugin.

 

https://www.npmjs.com/package/nuxt-gsap

 

While there are some issues I have to figure out sometimes with nuxt, I am not sure if this is one of them.

I am having problems clearing out all of my timelines.

I have a listener that is firing at the correct time - i'm just not sure if it's actually doing anything to my scrollTrigger timelines.

 

const removeWrapperListen = (v, col1, col2)=> {
console.log("REMOVE LISTEN");
document.querySelector(".m").style.zIndex = v;
}			
const addWrapperListen = (v, col1, col2)=> {
document.querySelector(".m").style.zIndex = v;
}
// doesnt matter the animation - just that it works
let t1 = this.$gsap.timeline({
				scrollTrigger: {
					trigger: ".whatever",
					start: "-200px bottom",
					end: "+=100", 
					scrub: true
				}
			  })
			  .to('.blah', {duration:1, ease:'expo.in', opacity:1})
			let t2 = this.$gsap.timeline({
				scrollTrigger: {
					trigger: ".whatevertwo",
					start: "-20px bottom",
					end: "+=200", 
					scrub: true,
  					onLeave:() => removeWrapperListen(10, mint, fadedred),
  					onEnterBack:() => addWrapperListen(10, mint, fadedred)
				}
			  })
			  .to(num, {var: 3000, duration: 5, ease:"none", onUpdate:changeNumber, onUpdateParams:[num]})
// this fires           
this.$nuxt.$on('index-width-mobile', () => {
				console.log("NO LISTENERS!")
				t1.clear();
				t2.clear();
});

Unfortunately i'm still getting addWrapperListen firing -

"Uncaught TypeError: Cannot read property 'style' of null at addWrapperListen"

 

Am I clearing the timeline variables correctly with clear() ? Is there another way to just remove all gsap animation on this component without affecting others?

A hack way, which i ultimately don't want to do, is set a variable and do a number of if statements inside of my functions? i.e. const addWrapperListen = () =>{

if(something){document.querySelector.....} but I don't really think that's the best way.

[ZachSaucier]

Hey pdub. Can you please create a minimal demo? Please strip out everything unrelated to your question.

[pdub]

I'd love to - but codepen doesn't support nuxt all that well...and codesandbox is kind of a nightmare to set up with all the dependencies.

[pdub]

I guess my generic question is, if I set my timelines to let ( vars ) and that event is firing - should that clear() - for each reference - technically remove any onLeave(), onLeaveEnter(), onEnter(), on EnterBack() listeners? Or is there a better way to clear everything in that scope?

[ZachSaucier]

You should kill off your ScrollTriggers in addition to clearing the timelines. Try something like this:

ScrollTrigger.getAll().forEach(ST => ST.kill());

 

[pdub]

Well, we are definitely on to something. No errors!

Unfortunately, ( and i know it's not ideal - but there's not a great way around it in nuxt ) - I don't have just one uniform scrollTrigger - so that kills ALL animation in my project.

There is a scrollTrigger in a couple other components.

I wonder if this is one global scrollTrigger when registered:

this.$gsap.registerPlugin(ScrollTrigger);

Or if I could set it to a const or let and give it scope and then target that one.

I know this isn't specifically a GSAP question since it's a port for nuxt - so answering what this.$gsap.registerPlugin(ScrollTrigger) does may not be directly/specific to this forum. I'll take a look.

Edited December 14, 2020 by pdub
* needed to add a sentence

[ZachSaucier]

As covered in the docs, you can attach an ID to a ScrollTrigger and get it using that. But what would likely be easier is keeping track of all of the relevant ScrollTriggers in an array or something like that. 

[pdub]

"As covered in the docs, you can attach an ID to a ScrollTrigger and get it using that."

 

And that is the answer right there.

Well done and thank you.

 

For anyone else dealing with clearing the scrollTrigger plugin within a component:

let t1 = this.$gsap.timeline({
                scrollTrigger: {
                    trigger: ".your-trigger",
                    start: "-200px bottom",
                    end: "+=100",
                    scrub: true,
                    id:"t1"
                }
              })
.to('.blah', {duration:1, ease:'expo.in', opacity:1})

ScrollTrigger.getById("t1").disable();