iongion Posted December 15, 2022 Share Posted December 15, 2022 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. Link to comment Share on other sites More sharing options...
GSAP Helper Posted December 15, 2022 Share Posted December 15, 2022 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. Link to comment Share on other sites More sharing options...
iongion Posted December 15, 2022 Author Share Posted December 15, 2022 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. Link to comment Share on other sites More sharing options...
GreenSock Posted December 15, 2022 Share Posted December 15, 2022 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? Link to comment Share on other sites More sharing options...
iongion Posted December 15, 2022 Author Share Posted December 15, 2022 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. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted December 15, 2022 Solution Share Posted December 15, 2022 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. Link to comment Share on other sites More sharing options...
iongion Posted December 18, 2022 Author Share Posted December 18, 2022 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now