FLIP with transformed element snapping

[SteveS]

I'm creating a section on a site where when the user clicks on a "bubble" it animates to a different container using FLIP. It works beautifully by itself, but when I apply a hover effect to the bubbles, it instead snaps to the new container instead of animating.
 

I saw this thread which seems somewhat close to the issue I'm having, but I can't really identify what is causing my problem.

See the Pen WNLoXLw by StevenStavrakis (@StevenStavrakis) on CodePen

[mvaneijgen]

Hey @SteveS long time no see! 

 

This is not the correct setup, but why not add another element to the mix and do your hover animation on that, that way you're not fighting tweens that want to animate the same element. 

 

See the Pen qBLPMzm?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[SteveS]

Yeah, I had to take a break and focus on some other stuff. Life is strange.

I considered doing something like this where instead I wrap each "orb" in a container and animate that container. It's not impossible, but it doesn't help me understand what is happening. My basic understanding of FLIP would seem to indicate that it should work. Or, at least, that it shouldn't break specifically in the way it is breaking.

[SteveS]

Yeah, I rectified the issue by adding the mouse movement effect to a wrapping element and then moving the orb in and out of it. Problem solved. I'm still not completely sure what the issue was but it's a fine enough solution.

[GreenSock]

Yeah, Flip uses x/y transforms to do its magic, but you had a "mousemove" handler that was simultaneously trying to control the same properties, animating them to completely different positions. You created conflicting tweens. Make sense?  

[SteveS]

I see. It wasn't snapping, it was just putting in the mouse directed transform. Makes sense.