Play or reverse animation on hover

[Cornetto]

Hii,

 

I am starting to learn GSAP, it's awesome! But i am stuck with an animation.

 

I have two planes, a black plane (left one)  and a white plane (right one). When i hover (for example) on the black plane, i want it to become wider to the right so all the content is visible. And when i hover it, the white plane needs to go to the right. The same applies to the white plane but that plane needs to become wider to the left and the black plane needs to go to the left. That part was successful!

 

What the problem is:

But now, when i hover on the black plane and i go with the mouse straight away to the white plane it bugs a little and i have no idea how to fix that.

 

I hope I have sorted it out as well as possible. Thanks in advance.

See the Pen LYVLBwM by Cornettoo (@Cornettoo) on CodePen

[ZachSaucier]

Hey @Cornetto and welcome to the GreenSock forums! Good work on your demo so far.

 

The issue is that you are trying to play multiple tweens that are trying to affect the same properties of the same objects at the same time and thus are in conflict with one another. You could fix that in the following ways:

• Prevent the mouseenter tweens from firing until the other animation completes.
• When the mouseenter of a different section happens before the other animation completes, animate back to the original state and then fire the new animation.
• Ditch the set animations that you have now and generate the necessary animations to go from the state right once it's hovered to its goal state each time that the sections are hovered.
• Use a different, more simple approach (my personal preference).

If I were creating an effect like the above, I would try to use flexbox like so:

See the Pen YzXQdmG by GreenSock (@GreenSock) on CodePen

 

Side notes:

• Instead of using a .to() tween with a duration of 0, it's better practice to use a .set() call. 
• You don't need to add  + 'px' when manipulating DOM properties like height. GSAP adds units for you  
• It's best to avoid animating width, height, top, and left if at all possible. It's better to animate transform properties like scale, x, and y.

Let us know if we can help with anything else. Happy tweening!

[Cornetto]

Hej @ZachSaucier, thanks for your quick reply!

 

That explains a lot ! Thanks.

 

For now i have two options:

• First (but not best), change width and left positions.
• Second, change flex-grow.

I updated the codepen.

 

Again, thanks for your help!