Using TweenLite For Basic Transition

[_d3CipH3R_]

I am currently experiencing a problem creating a smooth transition in my animation.

 

The purpose of this animation is to create a small animation when the user hovers his/her cursor over the division element.

Everything works well, except when it gets to a certain point.

It starts to slow down (not performance wise). Is there some kind of conflict?

 

See the Pen mtJvB by _d3CipH3R_ (@_d3CipH3R_) on CodePen

 

Please help me resolve this issue.

 

This is one brilliant animation framework available on JS. Keep up the good work GreenSock

[jamiejefferson]

This is a problem with the mouseover/mouseout events; as the child spins around several mouseover/mouseout events are fired as the cursor enters and leaves the blue square, therefore recreating the tweens each time and causing 'slow down'.

 

If you create a 'cover' element to handle the mouse events, that should prevent the unwanted events as things animate and work as you were expecting.

 

See the Pen fouEI by jamiejefferson (@jamiejefferson) on CodePen

[_d3CipH3R_]

I've found another useful link: http://www.greensock.com/css3/

Under clip effects