onStart not called when on low fps

[zanntux]

Hello,

I have an issue where I use timeline and onStart callback for some important logic but sometimes it's not called on low fps. Is this intentional or is it a bug?

 

In the codepen I am animating 5 green boxes and on their onStart im making them visible. If some of them are not visible on timeline completion, the timeline will pause. There are also console logs to observe if onStart is not called.

If the fps is not low on your machine, you can increase the value of the const numCubes, to reduce performance of the codepen.

I've attached a screenshot where it happens on my machine. I am aware that 2 fps is way too low but it's just for reproducing the problem. 

 

 

See the Pen YPPPzrM by martin-nikolov (@martin-nikolov) on CodePen.

[Rodrigo]

Hi,

 

You are clearly bogging the CPU quite a bit which IMHO, is far from a realistic scenario. If anything clogs the CPU that much you have bigger problems than GSAP Callbacks not being executed.

 

That being said you can use GSAP ticker's lagSmoothing config in order to track those delays and keep everything in sync:

https://gsap.com/docs/v3/GSAP/gsap.ticker/#gsaptickerlagsmoothing

 

This seems to execute all the callbacks:

gsap.ticker.lagSmoothing(300, 50);

for (const box of boxes.children) {
  box.style.display = "none";
}

let tl = new TimelineMax({
  repeat: -1,
  repeatDelay: 3,
  onComplete: () => {},
  onRepeat: () => {
    console.log("onRepeat");
    console.countReset("onStart");
    console.countReset("onComplete");

    for (const box of boxes.children) {
      box.style.display = "none";
    }
  }
});

for (let columnIndex = 0; columnIndex < 5; columnIndex++) {
  let box = boxes.children[columnIndex];

  let labelName = "columnIndex-" + columnIndex;

  tl.addLabel(labelName, 1.3 + columnIndex / 2);

  tl.to(
    box,
    0.2,
    {
      onStart: () => {
        // sometimes this onStart will not be called on low fps
        console.count("onStart");
        box.style.display = "inline-block";
      },
      onComplete: () => {
        console.count("onComplete");
      },
      scale: 1.1,
      repeat: 1,
      yoyo: true
    },
    labelName
  );
}

const checkTl = () => {
  tlProgressDiv.textContent = tl.progress().toFixed(2);

  if (tl.progress() === 1) {
    let boxCount = 0;

    for (const box of boxes.children) {
      // self testing, all boxes should be visible on complete
      if (box.style.display === "none") {
        console.log("onStart was not called. Paused timeline.");
        result.textContent = `onStart ${
        boxCount + 1
      } was not called. Paused timeline.`;
        tl.pause();
        return;
      }

      boxCount++;
    }
  }
};
gsap.ticker.add(checkTl);

Also I removed all the RAF callbacks and added them to the GSAP ticker in order to keep everything in perfect sync.

 

Hopefully this helps

Happy Tweening!

[GreenSock]

I think this did expose a small bug that should be resolved in the next release which can be previewed at:
https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

It'd only affect things if the playhead of a repeated animation moved from the start PAST the end, into a further iteration beyond the first iteration. Very rare, of course. 

 

Please let me know if the updated version resolves things for you. 

[zanntux]

13 hours ago, Rodrigo said:

You are clearly bogging the CPU quite a bit which IMHO, is far from a realistic scenario. If anything clogs the CPU that much you have bigger problems than GSAP Callbacks not being executed.

I have intentionally overkilled the performance in the codepen so the problem can be easily reproduced. This came to me from our QA team and it happened on Iphone 12 with power saving mode, at around 30 fps. I was depending on that onStart to call an event, which was not called and my game didn't proceed working as it should.
I've tried setting gsap.ticker.lagSmoothing(300, 50); but it doesn't help. I even tested with lagSmoothing(0) and still the issue is there.
 

10 hours ago, GreenSock said:

Please let me know if the updated version resolves things for you. 

I've changed the codepen to use the latest beta version but unfortunately the issue still happens.

 

[GreenSock]

I wonder if you just needed to clear your cache? I updated your CodePen to use the latest beta and the modern syntax (I'm not sure why you were using the SUPER old TimelineMax and the ancient syntax), and I couldn't reproduce the issue: 

 

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

 

Am I missing something? 

[zanntux]

Testing from my home pc (which is more powerful), in my codepen the problem happens immediately. In your codepen (with the beta version) indeed it didn't happen until I decided to increase const numCubes value to 900000 to make more stress. Then it happened on the 5th repeat of the timeline. It looks like it won't happen that easily but still possible.

 

 

[GreenSock]

Oh, I see - it's a logic challenge in the way you're setting up your test and the assumptions you're making. As the docs indicate, onStart fires when the virtual playhead moves from 0 to anything greater than 0, but you've got a yoyo: true tween, so imagine what happens if you move the playhead of the parent all the way from the start to the very end of the yoyo...the virtual playhead would go from a time of 0...to a time of 0! So although the onComplete fires correctly because the playhead reached the end of the yoyo'd tween, the onStart would NOT fire because the playhead never moved away from 0 in that case.  

 

That being said, I think it does make sense to change the behavior in the next release so that in this edge case the onStart would fire. I have updated the beta file again (you may need to clear your cache) - does that work better now? 

[zanntux]

It seems the issue is resolved now with the beta version! Great work and thank you for the fast reaction! GSAP has the best support I've seen. And sorry for the legacy syntax (TimelineMax), I will try to update my old habbits 😆.