Reliable way to check if a ScrollTrigger.batch is indeed killed?

[asteroidtoastnetwork]

Hi, I have a page where many items called .box appear as you scroll

They're 100vw/100vh, and I apply a .visible class to them when they're in the viewport

 

Mounted

this.setupBoxObserver()

 

setupBoxObserver() Method — killing first and recreating, called everytime a new .box arrives :

      this.boxScrollTriggerArray.forEach(st => st.kill());
      this.boxScrollTriggerArray = ScrollTrigger.batch('.box', {
        id: 'boxScrollTrigger',
        trigger: '.box',
        start: "top bottom",
        end: "bottom top",
        toggleClass: "visible",
      })

this.boxScrollTriggerArray is an empty array when the app starts.

I often need to kill this batch and recreate it, but I'm in the dark while doing this as I don't really know if the batch is indeed killed.
I've tried a few things, but I'm unsure if they work.

this.boxScrollTrigger.forEach(st => st.kill());

ScrollTrigger.getAll().forEach(st => st.vars.id === "boxScrollTrigger" && st.kill());

 

❓ Question

Would you know a reliable way to check whether the batch is indeed killed? Via ScrollTrigger, JS, in the code or via console

 

Thank you for reading

[GSAP Helper]

A few questions...

1. What makes you suspect that they weren't properly killed? 
2. Are you using a framework/library like React/Vue? 
3. Why are you repeatedly killing everything and recreating them all again? Just curious.
4. **more importantly** can you please provide a minimal demo that clearly illustrates the problem? This will go a looooooong way in getting you a solid answer.

This just smells a bit like an engineering problem which is why it'd be much more helpful to see a clear minimal demo. 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[asteroidtoastnetwork]

Thank you for your reply @GSAP Helper
Here is a codepen that gives the general idea: 

See the Pen yLZvqMv by eze4fz4e4zegzegzeg (@eze4fz4e4zegzegzeg) on CodePen

But I don't really have a problem, as of now my code works and seems ok.

So my question is more general like "If you had to make sure a ScrollTrigger is killed, what JS line would you write after the line that kills it, in order to check" rather than focused on my case here.
 

Regarding your questions

What makes you suspect that they weren't properly killed? 

I don't know, I'm just afraid of them accumulating and conflicting with other ScrollTriggers I'll be adding for other things. And I don't see how to get a positive feedback to put my mind at ease.

 

Are you using a framework/library like React/Vue? 

I'm using Vue 3.2.41 and GSAP 3.12.2

 

Why are you repeatedly killing everything and recreating them all again? Just curious.

I have a JS/Vue scroll listener that adds new .box elements as you scroll, but I don't know how to tell the ScrollTrigger Batch to "update" and check for the new .box elements that have just arrived without killing the whole thing and recreating it.

[Rodrigo]

Hi,

 

If I understand correctly, you don't have to kill the ScrollTrigger instances that are already created, just add the new elements and create the ScrollTrigger instances for those new elements, as shown in this demo:

See the Pen YzOzjbL by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

6 hours ago, asteroidtoastnetwork said:

"If you had to make sure a ScrollTrigger is killed, what JS line would you write after the line that kills it, in order to check"

Well one way is to see if it's still in the ScrollTrigger.getAll() Array: 

See the Pen MWLVypy?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Are you having trust issues with ScrollTrigger's kill() method? 🤣

 

Also, you can just set once: true on your batch if you want each instance to kill itself once it hits its end position the first time: 

See the Pen OJdvNpq by GreenSock (@GreenSock) on CodePen

[asteroidtoastnetwork]

Thank you Rodrigo and Greensock, sorry for the late reply I got busy

The methods you're showing are interesting, it's less convoluted than what I'm doing 😁

 

The return !ScrollTrigger.getAll().includes(st);  method you did is what I was looking for!

 

Quote

Are you having trust issues with ScrollTrigger's kill() method? 🤣

Haha no, but trust issues with my code and logic definitely!