[How do I avoid undesired effects when creating multiple animations?]

1 hour ago, GreenSock said:

If you apply a transform of any kind (which is what you were doing by animating the "y" property - transform: translateY()), it creates a new stacking context which affects the offsetTop/offsetLeft measurements.

@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.

 

1 hour ago, GreenSock said:

This is why I spent a fair amount of time reworking your demo for you. Did you notice it works perfectly regardless of whether or not you have a transform applied? Give it a try.

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.

 

1 hour ago, GreenSock said:

I even added code to handle the case where the user scrolls while hovered (your original broke in that case too). Did you look at the code in my demo? 

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.

[How do I avoid undesired effects when creating multiple animations?]

2 hours ago, GreenSock said:

It has nothing to do with a tween being applied - it's simply that whenever there is ANY transform applied to an element (even translate(0px, 0px))...

 

It's also a very bad idea to apply CSS transitions to something that you're using GSAP to animate. It's terrible for performance in most cases since they're kinda fighting with each other over the same property of the same element. 

 

Performance-wise, the way you're doing it is somewhat costly because you're calculating offsetLeft/offsetTop/offsetWidth/offsetHeight and also querySelector() on EVERY mousemove. Here's how I'd do it in a more performant way that isn't thrown off by transforms:  

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.

[How do I avoid undesired effects when creating multiple animations?]

8 hours ago, mvaneijgen said:

I still need to dive in to how it works my self, but have you seen the .quickSetter() function...If you find yourself calling gsap.set() many times on the same object (or set of objects), like in a "mousemove" event, you can boost performance 50% - 250% by creating a quickSetter function and using that instead of gsap.set().

 

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'. 

[How do I avoid undesired effects when creating multiple animations?]

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.

 

 

See the Pen vYrNxwq?editors=0010 by chrisandrew_dev (@chrisandrew_dev) on CodePen