chrisandrew

@GreenSock Jack, Gotcha, I misunderstood you as referring to CSS transforms, I didn't realise you were referring to animating the 'y' property in the tween. Thank you again for that. I had mixed results (maybe something to do with Chrome?). There were instances when 1-2 cards wouldn't respond on mouseover. I'll see if I can work out why. TBH, the necessity of this logic threw me a little. It makes more sense now. I'll have a go at implementing your solution in React (the production codebase is React). I really appreciate the time you've taken to help.

Thanks @GreenSock Jack, I really appreciate you taking the time to respond. I'm not transforming any elements in my demo but I can absolutely replace CSS transitions with GSAP eases. Regarding performance etc, my pen is merely intended for demonstration purposes. I understand and agree that there's room for optimisation in production. Applying a tween to a card (gsap.to('.card', { y: 100 })) 'breaks' the tween applied to the card title. I'm still not clear why this is the case or how to avoid it. That is the specific problem I am trying to solve (and more importantly, understand). Apologies I didn't communicate more clearly.

Thanks, @mvaneijgen. I understand that there's room for optimisation in the pen however the pen only serves to demonstrate that when a second animation (in this case gsap.to('.card', { y: 100 })) is applied, the first tween (on mouseover) 'breaks'.

Hi! First-time poster, please let me know if I can do anything to improve future questions. In the attached pen, I'm tweening the card title to follow the cursor on mouseover. In isolation, it works as I would expect. However, the behaviour changes dramatically when any arbitrary tween is applied to the card containing the title. I often encounter similar difficulty to avoid undesired effects, as well as issues with things like stacking context. I think I'm missing something critical about where, when and how to create and use multiple tweens correctly. Any guidance would be much appreciated.