Jump to content


Reverse timeline on hover's mouseleave (yoyo animation)

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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


  • Like 3
  • Thanks 2
Link to comment
Share on other sites

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


Thanks a lot.

  • Thanks 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

What you can do is add





to the hoverOff() function.


I updated my pen.


let me know if that works

  • Like 2
Link to comment
Share on other sites

Works like a charm.

Thanks again Carl

Link to comment
Share on other sites

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 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.