Jump to content


hover animation

Recommended Posts

I have a simple animation that upend every time the user over on button.
i have a 10 buttons one near the other. and the imageContainer show the prodact.

when the user go our from the button i want to hide this element.

gsap.from("#imageContainer", .5, {css:{scaleX:0.8, scaleY:0.8, opacity:0}});

on the first time that work great but is the mouse run on the button the animation stop work and the image stack on opacity 0.

i try to use restart. seek and kiil but dont foud the right way to start the animation every time from the begin.

Link to comment
Share on other sites

Hey amihanya. It's really hard for us to trouble shoot blindly. Can you please create a minimal demo of the issue in something like a CodePen? This thread talks more about ho to do so:


Link to comment
Share on other sites

You probably need a fromTo animation. If you interrupt the animation, it's going to animate the opacity from 0 to the current opacity value.


Quickly click the button to see the problem. You can fix it using a fromTo animation.


See the Pen 8737c62b8f3253745552bba7992c58b4 by osublake (@osublake) on CodePen



  • Like 4
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.