Animation comes back to mousemove after doing mouseleave

[Trapti 178 Likes (Specialist)]

Hello, 

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

[ZachSaucier 7,152 Likes (Superhero)]

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

[Trapti 178 Likes (Specialist)]

Thank you so much for your help and suggestion. But as I changed it to timeline again it is very slow. 

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

@ZachSaucier