hover - begin time line, out return to original

[Guest struthyBhoy]

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]

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

[Guest struthyBhoy]

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

[Acccent]

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

[Guest struthyBhoy]

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

 

Thanks again.

[Guest struthyBhoy]

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]

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

[Jonathan]

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