Jump to content
Search Community

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

RyanHerbert test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • Solution

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.
×
×
  • Create New...