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

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!

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

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.

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

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

[My horizontal infinite image slider with different widths is messed up.]

Hello @GreenSock thank you for your reply and for making things cooler since Flash

 

I've found a way to fix my code, images are now placed correctly:

    const dispose = (scroll) => {
      gsap.set($items, {
        x: (i) => {
          const sumWidth = Array.from($items).slice(0, i).reduce((acc, item) => acc + item.clientWidth, 0);
          return sumWidth + scroll;
        },
        modifiers: {
          x: (x, target) => {
            const currentIndex = Array.from($items).indexOf(target);
            const s = gsap.utils.wrap(-$items[currentIndex].clientWidth, wrapWidth - $items[currentIndex].clientWidth, parseInt(x));
            return `${s}px`;
          },
        },
      });
    };
    dispose(0)

 

I've checked a few console.logs and indeed this code seems do be running a bunch of stuff for nothing.
I didn't know about the consulting services, I might reach out then.

Thank you all

[My horizontal infinite image slider with different widths is messed up.]

Hi @mvaneijgen thank you for your reply 😍

 

I didn't know that this helper existed. I understand it's a good solution.

Although I'm unable to get the Inertia Plugin, I'm not good and I've built other things on top of the Codepen.

Switching to this new method will be painful for me. And is, I've been trying today and it's breaking.

 

Perhaps it's not ideal but I'd like to keep the code I have and just manage to place the boxes correctly.

 

If ever anyone can help me on this aspect only, keeping the code as is without seamlessLoop, it would be awesome.

I'm under the impression that the solution isn't far, with an edit on the dispose() function.
I'm on GSAP 3.12.2

[My horizontal infinite image slider with different widths is messed up.]

Hello,  I can't get an infinite horizontal image slider to work correctly,

Images are getting positionned incorrectly, because they have different widths.

 

"My code" is here:

codepen.io/eze4fz4e4zegzegzeg/pen/bGzRoRM

 

It's based on this Codepen:

codepen.io/supah/pen/VwegJwV

 

It's very close to it, except my images each have different widths and a common height.

 

On "My code" HTML i've changed each image widths using style="width:XXvw"

I also changed wrapWidth so that it is a sum of all the items clientWidth

let wrapWidth = 0;

for (let i = 0; i < $items.length; i++) {
  wrapWidth += $items[i].clientWidth;
}

 

On the original codepen, it's using let itemWidth = $items[0].clientWidth

So I also changed the dispose() function's set() and wrap(), so that it doesn't use the first item's clientWidth, like this:

const dispose = (scroll) => {
  gsap.set($items, {
    x: (i) => {
      // Use the clientWidth of each item in $items
      return i * $items[i].clientWidth + scroll;
    },
    modifiers: {
      x: (x, target) => {
        const currentIndex = Array.from($items).indexOf(target);
        // Wrap based on the clientWidth of the current item
        const s = gsap.utils.wrap(-$items[currentIndex].clientWidth, wrapWidth - $items[currentIndex].clientWidth, parseInt(x));
        return `${s}px`;
      },
    },
  });
};
dispose(0)

 

Would you know how I can fix my codepen?

I think the problem is in the dispose() function where the index is getting messed up.. But I don't get it

 

Thank you for reading

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