Detect when tweens do actually play inside nested timelines

[iongion]

When using nested timelines

 

- if one scrubs the parent timeline positively, all children tweens up until that moment get the `onComplete` and `onUpdate` with `progress = 1` triggered

- if one scrubs the parent timeline negatively, all children tweens before that moment get the `onStart` and `onUpdate` with `progress = 0` triggered

 

I am interested in detecting if the tweens have actually played and create some extra events some extra events like `onEnterTween` `onExitTween`

 

What's the best kind of strategy that I should use ?

 

One would be to check if the main timeline time is in between tween's start and end time - but the progress is not 0 or 1 - but this eliminates the bounds, I do want to keep them.

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[iongion]

See the Pen PoaMJKN by iongion (@iongion) on CodePen

 

if you drag the root slider all the way to the end, the blue bordered log box will show this - which is correct, by design

1: ["box1","onStart",1]
1: ["box1","onUpdate",1]
1: ["box1","onComplete",1]
1: ["box2","onStart",1]
1: ["box2","onUpdate",1]
1: ["box2","onComplete",1]
1: ["box3","onStart",1]
1: ["box3","onUpdate",1]
1: ["box3","onComplete",1]

if you drag it the other way - also correct, by design

0: ["box3","onUpdate",0]
0: ["box2","onUpdate",0]
0: ["box1","onUpdate",0]

 

What I am trying to detect is if for example box1 has played between 0 and 1 progress and not directly going to 1.

 

[GreenSock]

4 hours ago, iongion said:

What I am trying to detect is if for example box1 has played between 0 and 1 progress and not directly going to 1.

I'm having a difficult time understanding your question. You have no problem detecting the playhead position accurately, etc. but you want to know if a particular tween has EVER had its playhead land anywhere BETWEEN 0 and 1 (progress) at any point in time historically?

[iongion]

When one scrubs/seeks - inner timelines either get seeked to 0 or to 1, if the playhead of the timeline is before and or after their duration.

 

Only for those timelines for which the playhead lands in between their start / end moments, we can consider as ever playing at all.

 

What I am saying is that with current onStart / onComplete I can only detect if they either arrive at start or end, without actually knowing if they played at all (enter).

This is what I would like to detect, if they actually have played at all.

 

 

[GreenSock]

That's what's confusing, though - what exactly do you mean by "played"? If the playhead jumps to the very end, it sounds like you are considering that NOT to have played but technically GSAP renders that at the end so it has played in a sense (rendering-wise). You also didn't clarify if you consider it played based on whether or not the playhead has EVER been ANYWHERE other than 0 or 1 (progress). So for example, let's say the playhead jumps to a progress of 0.5 (so yes, you're now considering it "played") and then to 1 but then subsequently you move the playhead all the way back to 0...is that now NOT considered played? Technically there was a time in the past where it rendered at 0.5, so is it considered "played" forevermore? 

 

If you're trying to set a state flag on each animation indicating if it has ever had its playhead anywhere other than a progress of 0 or 1, you could do: 

 

onUpdate() {
  if (this.progress() % 1) {
    this.played = true;
  }
}

I hope that helps.

[iongion]

I found it actually with your idea and after better observing what is happening.

Actually, what happens is that all the 3 events happen in order and with certain progress.

 

Positive scrub past a nested timeline

 

- onStart - progress 1

- onUpdate - progress 1

- onComplete - progress 1

 

Negative scrub before a nested timeline

 

- onStart - progress 0

- onUpdate - progress 0

- onComplete - progress 0

 

So, I am just memo-ing a hasPlayedThrough flag that I can use in either onUpdate or onComplete - if the onStart did not go directly to 1 or 0 depending on the seek/scrub type.

 

This is just lovely, gsap is so well done!