Multiple tweens not animating 2nd time

[sygad1 15 Likes (Newbie)]

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 3,989 Likes (Superhero)]

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 15 Likes (Newbie)]

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 3,989 Likes (Superhero)]

Hi sygad1,

 

You can use for example a var for the ease: 

 

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

 

Best regards

[sygad1 15 Likes (Newbie)]

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