Jump to content
Search Community

Play or reverse animation on hover

Cornetto test
Moderator Tag

Recommended Posts



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

Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...