Reverse timeline on hover's mouseleave (yoyo animation)
Hey guys,
My hover animation is on an infinite loop.
After mutliple loops, on mouseleave, my animation will reverse all the loops.
I need the timeline to reverse the loop only once before stopping.
I've been using .time but I guess it is not the best method.
Any help would be apreciated, thanks in advance.
See the Pen NazaJR by m_90 (@m_90) on CodePen
Thanks for the demo. Cool effect.
Since your hover timeline has multiple staggered animations with different durations that repeat infinitely there really isn't an easy or practical way to just reverse the timeline to a point where everything appears as it did when the timeline started... without reversing all the way to the beginning.
I think the cleanest solution here is to create the hoverOn / hoverOff animations on demand when you need them.
Notice how i use 2 separate
