Issue playing and reversing timelines while animations are active

[DarioCru]

Hi there,
I'm having troubles on managing the status of a button using two timelines.

onmouseenter: behaves as expected

onclick: it is still ok

onmouseleave: on  the dark background it is ok, but on the light background (after click), it seems that one of the timelines is not reverting all the elements to their initial status.

 

in particular, I can still see the vertical line and the right-side copy (switch to light UI) that are supposed to be reverted on their initial status (opacity:0).

I suspect that is could be related to the fact that the two timelines share some element and that could create conflicts.

 

Also, when the user click quickly on the button while any animation is still running, or move the mouse out immediately after click, it all start behaving in an unexpected way.

It must be related to suppressing elements. 
If you can recommend any solution or best practice it would be very appreciated

 

Thanks

See the Pen povomZB by dariocrucitti (@dariocrucitti) on CodePen

[ZachSaucier]

Hey DarioCru and welcome,

 

For this sort of thing I actually recommend using a single timeline and using .tweenTo() to go from state to state. That way you don't have to worry about conflicting tweens. 

 

It looks like you haven't created all of the tweens yet (or at least they're grouped incorrectly) but here's the basic approach just using the tweens that you have already:

 

See the Pen xxbbbEa?editors=0010 by GreenSock (@GreenSock) on CodePen

 

P.S. I used to work with a company called Cru  

[DarioCru]

Thanks for the quick answer Zac

Your approach looks clean and makes sense, I was hoping to save some line of code using the function reverse(); 

I'm going to use many effects and interactions, some of them uses a lot of CPU and I'm trying to do my best for optimising the code and making it light and smooth. In this sense, what do you recommend for small interactions? CSS or JS? which of the two overloads the CPU the most?

 

Tomorrow I will give a try using .tweenFromTo() rather than .reverse(), that will help on saving some line of code, I'm only concern about the behaviour when a tween get interrupted from another interaction (e.g. click and quickly move out while is animating). will it complete the tween and then perform the next one or they will overlap? anyway, in the worst scenario I will create one tween for each status.

PS: That's how the universe works  if things go well maybe one day you will work with another company called Cru! ?

[ZachSaucier]

9 minutes ago, DarioCru said:

I was hoping to save some line of code using the function reverse()

.tweenTo() uses less lines of code  It should have the same amount of tweens (animations) that the .reverse() has and less conditional logic.

 

10 minutes ago, DarioCru said:

what do you recommend for small interactions? CSS or JS? which of the two overloads the CPU the most?

CSS transitions can be okay for some things. But with any real amount of complexity you should be using JS. 

 

12 minutes ago, DarioCru said:

I will give a try using .tweenFromTo()

tweenFromTo() !== tweenTo()  I recommend using tweenTo like I did in the demo above as it will save you from having to have as much conditional logic.

 

13 minutes ago, DarioCru said:

will it complete the tween and then perform the next one or they will overlap?

Neither - it will stop the previous animation midway and go back to the point specified. You can test it yourself in the demo above.

[DarioCru]

It worked well

Thanks Zach