Jump to content


Animation comes back to mousemove after doing mouseleave

Moderator Tag

Recommended Posts


Scenario: While moving the mouse the red color box should move and scale. On mouse leave should go back to original. 

Problem: After mouse leave also it is not resetting, I mean it is not going from scale 1.2 to 1. Also it is very slow transform. 

please help me. 

See the Pen ZEQzbVj?editors=1010 by tripti1410 (@tripti1410) on CodePen

Link to comment
Share on other sites

Hey Trapti. Thanks for the clear demo.


6 hours ago, Trapti said:

After mouse leave also it is not resetting

The reason why the leave doesn't work is because of you're using a setTimeout to delay the parallax effect for 200 ms. So the mouseleave does happen, just before the last parallax tween. I'm not sure why you're using a setTimeout...


6 hours ago, Trapti said:

it is very slow transform

That's because of your .in ease. Every time it updates it creates a new tween and .in eases are slow at the start, hence it appears slow. I'd just use the condensed string form and say ease: "sine" which defaults to an out ease. I also recommend using overwrite: "auto" for that tween to kill off old tweens.


Another reason why it appeared slow is because of the setTimeout.


Another side note is that you don't need quotation marks for numerical values like 0.


Here's a fork with those changes:

See the Pen oNbvYOM?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Thanks 1
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.