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! Haha no, but trust issues with my code and logic definitely!

Thank you for your reply @GSAP Helper Here is a codepen that gives the general idea: https://codepen.io/eze4fz4e4zegzegzeg/pen/yLZvqMv 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.

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

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

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

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