Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
RyanHerbert

Hover animation which reverses back to original state when mouse moves away

Recommended Posts

I'm having a few problems getting the animation to reverse back to the origianl state when the mouse is moved. Currently the code just snaps back to the icons original state.becomes a bit jumping when you have multiple aniamtions on each page.

 

Is the away so that when the mouse is removed either the animation finishes out the sequence or is reversed back to the original state. (istead of snapping back

 

Kind regards,

 

Ryan

See the Pen ZBqrjZ?editors=1010 by Ryan84 (@Ryan84) on CodePen

Link to comment
Share on other sites

Thanks for the demo. Very nice.

 

The easiest way to handle this is to start the timeline reversed and then toggle the reversed() state of the timeline on each hover like this:

 

var DIMENSIONTimeline = new TimelineMax();
DIMENSIONTimeline
   .to(".cylindertop", 2, {y: '-50%', ease:Power4.easeInOut})
   .to(".cylinder1", 2, {y: '50%',   ease:Power4.easeInOut}, 0.3)
   .reverse() //start in reversed state
   .timeScale(4) //speed it up for testing

                 
  $("#cylinder1, #cylinder2, #cylindertop").hover(function(){
  //set the reversed state equal to inverse of current reversed state (toggle direction)
  DIMENSIONTimeline.reversed(!DIMENSIONTimeline.reversed());
}); 

http://codepen.io/GreenSock/pen/oYJYVg?editors=0010

 

I took some of the repeats out of the animation and sped up the timing for testing purposes and clarity.

 

You can read more about toggling the paused state of an animation here concepts apply to  reversed)

  • Like 6
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.
×