Reverse timeline on hover's mouseleave (yoyo animation)

[M90]

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.

[Carl]

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 functions to create 2 unique timelines when each event occurs

function hoverOn() {
  var tl = new TimelineLite();
  tl.staggerTo(togItemsArray,1, { backgroundColor:"white", repeat:-1, yoyo:true, ease: Quad.easeInOut}, .2)
  .to(togMenu,1, {scale: 1.2,repeat:-1, yoyo:true, ease: Quad.easeInOut},.2);
}
function hoverOff() {
  var tl = new TimelineLite();
  tl.staggerTo(togItemsArray,0.3, { backgroundColor:"#101f46", ease: Quad.easeInOut}, 0.05)
  .to(togMenu,0.3, {scale: 1, ease: Quad.easeInOut},0.05);
}

 

 

See the Pen OxEzMQ?editors=0110 by GreenSock (@GreenSock) on CodePen.

 

[M90]

Exactly what I needed. I will always be amazed by the quality of this forum. 

 

Thanks a lot.

[M90]

Actually I might have another issue concerning the last pen you sent me. 

 

When I move my cursor fast, the animation does not seem to update correctly and the squares keep changing color. 

 

I've tried to remove easings, without results. My guess is this is linked to the stagger delay but I'cant find a way to correct it.

[Carl]

good catch. The staggered tweens that haven't yet started will not be overwritten (killed). 

What you can do is add

 

 

TweenMax.killTweensOf(togItemsArray);

 

to the hoverOff() function.

 

I updated my pen.

 

let me know if that works

[M90]

Works like a charm.

Thanks again Carl

[mikel]

Hi,

 

To stop the animation abruptly, this version would be feasible:

 

See the Pen 5c4fd1305e27a8808470af6f6104b02e by mikeK (@mikeK) on CodePen.

 

[M90]

Very nice demo Mikel, It is not why i'am trying to achieve for this specific animation but it definitely gives me inspiration for a next pen. 

Thank you