Jump to content
GreenSock

_d3CipH3R_

Using TweenLite For Basic Transition

Recommended Posts

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 B)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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.
×