hover - begin time line, out return to original

[struthyBhoy 4 Likes (Newbie)]

Hi,

 

I am trying to get the animation to play back to its original position when the cursor leaves the button.

 

Thanks in advance.

See the Pen GZKrOj by anon (@anon) on CodePen

[Acccent 358 Likes (Leader)]

Hey @struthyBhoy,
 
you should try defining your timeline outside of the hover() function, and then using jQuery's .mouseenter() and .mouseleave() instead of hover(). In those event handlers you can then play() or reverse() your timeline

[struthyBhoy 4 Likes (Newbie)]

Thanks Acccent - I will play about with that solution. Will prob take me a bit of time - I am no expert with javascript

[Acccent 358 Likes (Leader)]

If you're having trouble, have a look at

See the Pen EKYWja by Acccent (@Acccent) on CodePen

, but I'd suggest trying to figure it out on your own first

[struthyBhoy 4 Likes (Newbie)]

Thanks very much - I will give it half an hour on my own before cheating

 

Thanks again.

[struthyBhoy 4 Likes (Newbie)]

I almost got there although I was missing the  

{paused:true} 

and the wipeAnimationHover bit of

wipeAnimationHover.to(".device-ipad.client-sssc", 0.7, {
 		 x: "-30%",
        ease:  Power4.easeOut,
    })

Thanks.

[Acccent 358 Likes (Leader)]

You're welcome! Don't forget to mark the thread as answered if you don't have any other questions

[Jonathan 5,176 Likes (Superhero)]

Hello struthyBhoy, and Welcome to the GreenSock Forums!

 

Just a quick observation guys.. When using the GSAP timeline, either TimelineMax or TimelineLite. You don't have to use the delay property on your tween since GSAP provides the position parameter

 

http://greensock.com/position-parameter

.to( target, duration, vars, position )

This way you get full control over your timeline sequence