Force a timeline to stop and return to the beginning on mouseleave

[celli]

Hi, I have a gsap timeline that seems to stop mid way through the animation when I mouseleave quickly. The point at which it stops seems to be unpredictable in my real project, but it's always when I move my mouse quickly. It doesn't seem to happen much on this codePen, but it does happen pretty often in my project. I tried to set the progress back to 1 and then kill it (as you see in my codePen) but it still doesn't seem to work effectively.

I still want it to animate in reverse on mouseleave, but in-case it gets stuck I'd like a way to force it back to the starting position.

See the Pen 54aa93a612d345fa643f6b5ced9910f2 by celli (@celli) on CodePen

[iDad5]

Hi,

(I could not reproduce it)

 

I'd guess that the mouseleave fires not (correctly?) when you move fast enough to leave the window (browser window) - likely the mouse-events are pulled at some interval and when the mouse leaves the window before the event is fired, the event probably won't be fired at all.

Well I'm not sure what browsers (ans OSs)  do in that case, but it seems likely  to be connected to something like that, as you say it does not happen as often on codePen - where leaving the window take somewhat longer usually. 

There might be a change of adding a window onblur event, but you should make sure that it only fires, if the conditions are right. And I have never used it in production and wouldn't be surprised if it came with restrictions...
 

[GreenSock]

I couldn't reproduce either. Are you able to reproduce it on that CodePen even one time @celli? 

 

This is definitely a mistake: 

box.addEventListener("mouseleave", function () {
  return tl.reverse();

  tl.totalProgress(1).kill(); // <- THIS LINE WILL NEVER RUN!!!
});

You have a return statement on that first line which totally bails out of the function immediately, thus that next line never gets executed. But even if it did, you're having the opposite effect that you seem to want. Forcing it to a totalProgress(1) make it go to the END of the timeline, not the start. But aren't you trying to reverse it (to go backward toward the start)? Why would you then try to jump to the end and kill it? 

 

My guess is that your real project has a fundamental difference that's the root cause of the problem. 

 

You mentioned that it "gets stuck". That sounds to me like you must be killing it somewhere -or- you're overwriting somewhere. Do you have overwrite: true anywhere that might be getting triggered?

 

In order to effectively troubleshoot, we really need a minimal demo that clearly shows the problem but the one you provided seems to never show the problem which makes it tough. Any chance you could provide a broken demo?  

[celli]

Hi Jack,

 

You were absolutely correct. I had something else in my project that was causing the issue.

I am also animating the elements on window load, and this is what was causing the issue. I updated the codePen with this intro animation. If I mouseenter quickly on the element (before the initial window.load animation ends) then I would run into the issue.

I wrapped a setTimeout function (or I could use a callback) on my functions that control the hover effects and that did the trick—but is there a better way using GSAP to accomplish this?

 

[Cassie]

I'd just hold off creating the event listeners until the first animation is completed. ☺️
 

let tlHdrInit = gsap.timeline({
  defaults: { ease: "sine.out", duration: 0.5, delay: 0.5 },
  onComplete: () => {
    box.addEventListener("mouseenter", function () {
      return tl.play(0);
    });
    box.addEventListener("mouseleave", function () {
      return tl.reverse();
    });
  }
});

 

[celli]

Hi Cassie, Yes awesome. Very nice, thank you.