Multiple tweens not animating 2nd time

[sygad1]

Hi All,

 

Im trying to get 2 tweens to animate at the same time when I mouse in over a link, and to reverse the animation when I mouse out.

 

Each tween is working correctly in isolation, they're just not workingvery well together at the same time. The 2nd time you hover, the 2nd tween just jumps between its start and end points, there is no animation at all.

 

I tried adding the position parameter of "0" to the second tweens but it didn't solve the problem

 

Any help appreciated

See the Pen KvPJKP by sygad1 (@sygad1) on CodePen.

[mikel]

Hi ,

 

This is one option: build a timeline which is paused and you could play / reverse it by mouseenter / mouseleave:

 

See the Pen WEemPX by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

 

[sygad1]

Interesting approach and one I'll play with

 

not quite what i'm looking for though as this prevents me from customising the "leave" animation to an easeIn

 

cheers anyway though

[mikel]

Hi sygad1,

 

You can use for example a var for the ease: 

 

See the Pen WEemPX by mikeK (@mikeK) on CodePen.

 

Best regards

[sygad1]

Now that is very interesting, cheers for that, I think that will solve the problem