Loust

Hello community! So here's the thing: I have a window.resize event where I apply a state as true or false based on the screen size to hide and show elements. However, when I resize the window, the ScrollTrigger doesn't retrigger. I'm using React with Locomotive Scroll. During the resize event, I destroy (if that's the right logic) all the ScrollTriggers, then I do a ScrollTrigger.refresh(). My ScrollTriggers have invalidateOnRefresh: true, but nothing seems to work. So, I'm lost. If you need a minimal demo without issues, I can provide one. Thanks.

Yes, that's exactly what I was referring to, to avoid memory leaks and the kind of behavior I encountered with my bad practice using a simple ScrollTrigger. Thanks, Cassie, for your video; I'll watch it tomorrow.

I understand completely. `onEnter/onLeave/onEnterBack/onLeaveBack` allows associating functions that are not necessarily correlated with the triggering animation. A brilliant approach. Truly impeccable what you've done. I wholeheartedly recommend. Thanks once again to you and your responsive community space. One last question, if I may, don't bother otherwise, I'll do my research and tests, but does `ScrollTrigger.create()` auto-destruct like itself, kind of one-time use?

Indeed, I didn't think of that approach. I searched for many things, yet in vain. Thanks for your help. One question; so now, we prefer to use toggleActions? Are onEnter, onEnterBack, etc., deprecated? I'm new to the game, actually. I've been using GSAP for about a week, and React for a few months. Otherwise, I'll look on the internet to find out about toggleAction. Thanks again, anyway ;), your solution is very clean.

In fact, the scrollTrigger works very well. However, once I hover over one of the buttons, only their sentences are taken into account from a set of potentially larger number of sentences.

https://stackblitz.com/edit/stackblitz-starters-ywnimj?description=React TypeScript starter project&file=src%2FApp.tsx,src%2Fstyle.css&title=React Starter This kind of behavior roughly illustrates the problems I often encounter.

Thank you for your responses and their speed. So, yes, I had previously tested useGSAP without success. I was completely unfamiliar with Batch, it's really good, but it creates a very erratic behavior after the state change. Currently, I'm trying to create a minimal demo with React, but as soon as I try to go to CodePen, it asks me to log in, and I'm not sure where I put my password. I'm waiting to have it sent to me, otherwise I'll quickly create another account.

Hello community. So, after numerous searches and head-banging, I can't find the solution. I have an animation triggered by ScrollTrigger. This animation targets phrases. These phrases are inserted into the DOM through a map, triggered either on rendering or when the state changes. The desired effect is that the state, which is an array of strings, changes when the user hovers over one of the icons next to these phrases. Depending on the targeted icon, there can be two, three, or four phrases. The problem is that during onLeave, onEnterBack, or onLeaveBack, only the number of phrases from the first targeted icon is animated. In short, the initial state contains four phrases; if I then hover over an icon containing 3 phrases, then another icon with 2, then one with 3, then one with 4, only 3 phrases are animated in the ScrollTrigger animation. If the sequence is 4 phrases initially, then 2 on hovering over an icon, then 3, then 4, only 2 phrases are animated. I specify that I also use Locomotive Scroll, and due to the ScrollTrigger proxy, I cannot use useEffect with a dependency array in my .js function.