PointC Posted March 29, 2021 Share Posted March 29, 2021 I'm seeing some strange results when trying to get the repeat iteration on a timeline. The standalone tween in the demo returns what I would expect => (2,3,4,5,6), but with a timeline I get => (1,2,1,4,1). See the Pen PoWGKNp by PointC (@PointC) on CodePen 1 Link to comment Share on other sites More sharing options...
iDad5 Posted March 29, 2021 Share Posted March 29, 2021 If you go up to 20 iterations, you always get a 1 for each odd number. Seems like a bug. 1 Link to comment Share on other sites More sharing options...
Visual-Q Posted March 29, 2021 Share Posted March 29, 2021 Interesting... If you slow it down and you watch the logging, observe that it always returns 1 on the reverse of the Yoyo almost like it's counting two different states one iteration for the yoyo and a second for the repeat. Might be a bug See the Pen gOgwXxO by Visual-Q (@Visual-Q) on CodePen 1 Link to comment Share on other sites More sharing options...
GreenSock Posted March 29, 2021 Share Posted March 29, 2021 Yep, I know exactly why it'd happen and I'll look into whether or not there's a feasible workaround. When repeating, timelines have to force the playhead all the way to the end and then the very beginning in order to ensure that everything gets hit properly (imagine a tick hits 0.002 seconds before the end of the timeline, and the next tick is 0.1 second later...technically the playhead would wrap back to 0.098 from the start, but what if there was a .set() call at the very end of the timeline, or a super-short tween at the start, before 0.098 seconds?) This is only happening because you're doing it INSIDE the onRepeat which is fired in the middle of the wrapping (as it should). 1 1 Link to comment Share on other sites More sharing options...
iDad5 Posted March 29, 2021 Share Posted March 29, 2021 I really enjoy all you in depth explanations. Looking at the docs, I really find it hard to think of a situation where I need to set the iteration count of a timeline, but surely there are creative ways to use that feature. In this case I might argue - ok, it is a yo-yo timeline so actually one could be of the opinion that (internally) you time travel in an infinite loop, and the only valid values for iteration are 1 and 0. 😬 I still wonder how you will conquer the paradoxes of time (line) travel. If anyone can do it, it surely will be you. 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 31, 2021 Solution Share Posted March 31, 2021 The next update has a workaround for this, which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js But in the meantime, you can use this function: function getIteration(animation) { let time = animation.parent ? (animation.parent.totalTime() - animation.startTime()) * Math.abs(animation.timeScale() || 1) : animation.totalTime(), cycleDuration = animation.duration() + animation.repeatDelay(); return Math.floor(time / cycleDuration) + 1; } So you'd call it like: console.log(getIteration(tl)); 👍 1 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