Taking action when seek position moves before the child timeline position

[Saggit]

I need to take action when current seek position moves out of a child timeline. When the seek position moves "to the right" of a child timeline, an `onComplete` event is fired for that child timeline, which is great. However, when the seek position moves "to the left", no event is fired, as far as I can tell. There is the `onReverseComplete` event declared, but it is not triggered in this case.

 

I've got a complex scene with child timelines and a slider that user can use to seek a position within the scene. The idea is that when the seek position moves out of a child timeline, the DOM elements used for that child timeline are removed from the DOM tree.

 

I can try to implement a mechanism that keeps track of which child timelines contain the current seek position, but maybe I'm missing something in GSAP that I can use. Any suggestions are welcome.

See the Pen bGVQLxZ by mozmar (@mozmar) on CodePen

Edited May 18, 2020 by Saggit
Added codepen demo

[PointC]

Maybe you could put that into a simplified demo so we can see your setup. Thanks.

 

 

[Saggit]

@PointC, thanks for your reply. I should've provided the codepen from the start. It is now attached, please take a look. I need to catch the moment when the seek position moves to the left of the child timeline, and I don't see any simple way to do that.

[PointC]

Thanks for the demo. Please stand by on this. @GreenSock may have some info.

[GreenSock]

@Saggit we are considering a change to make onReverseComplete fire when the playhead returns to 0 (after having moved away from that position) regardless of whether or not the animation itself is in "reversed" mode. I definitely see some advantages to that. The down side is technically there's a chance it'd break some people's code (though I frankly doubt many people will even notice). 

 

Here's a preview of the upcoming release with that implemented (but I'm not 100% sure it'll stay in there): https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

I assume your vote would be to keep that change

 

In the mean time, here are two helper functions that should make it pretty simple:

// adds a callback that'll get fired when you hit the start of the timeline in the reverse direction (even if the instance isn't technically reversed)
function onReverseComplete(tl, callback) {
  trackDirection(tl).add(() => tl.getDirection() < 0 && callback(), 0);
}

// adds a getDirection() method to the timeline that returns -1 if it's going backwards, 1 if forward
function trackDirection(tl) {
  let onUpdate = tl.eventCallback("onUpdate"),
      lastTime = tl.time();
  tl.direction = tl.reversed() ? -1 : 1;
  tl.getDirection = () => tl.time() > lastTime ? 1 : -1;
  tl.eventCallback("onUpdate", function() {
    let time = tl.time();
    (time !== lastTime) && (lastTime = time);
    onUpdate && onUpdate.call(tl);
  });
  return tl;
}

So all you'd need to do is:

onReverseComplete(yourTimeline, yourCallback);

Here it is implemented in your CodePen: 

See the Pen 245143d1afdbbaa8af2c0e5827d3580d?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[Saggit]

Just wow. @GreenSock, thank you so much! GSAP has the best support I've ever seen. Your solution absolutely helped.

 

19 hours ago, GreenSock said:

I assume your vote would be to keep that change

Yes, please 🙂

 

Thanks again!