jsco Posted April 4, 2022 Share Posted April 4, 2022 In the middle of my timeline, I have an infinite animation that starts (the blue rectangle in my demo). Because of this, the `totalProgress` value becomes unusable, as the duration is something close to infinite. Is it possible to "ignore" the infinite animation on my timeline and calculate my progress and duration from other animations (in this case, the orange rectangle)? (bonus points if I can also get rid of the -1.5 delay on the following animation as that also feels a bit counter-intuitive) See the Pen oNppXwX?editors=1010 by cubefox (@cubefox) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted April 4, 2022 Share Posted April 4, 2022 I think a much cleaner solution would be to extract your infinite animation from the timeline: See the Pen YzYYaoj?editors=1010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
jsco Posted April 4, 2022 Author Share Posted April 4, 2022 @GreenSock I only want the rotation to start in the middle of my timeline, though. I also have a bunch of rotating elements so having to manually time them all is not super clean. I take it there's no built-in way to accomplish this then, right? Link to comment Share on other sites More sharing options...
Solution GreenSock Posted April 4, 2022 Solution Share Posted April 4, 2022 You can easily place a callback anywhere in your timeline: tl.to(...) .add(startInfiniteStuff) .to(...) function startInfiniteStuff() { gsap.to(...{ repeat: -1 }); } In terms of timing, you could accommodate that easily too: function createInfiniteStuff() { let tl = gsap.timeline({repeat: -1}); tl.to(...); //whatever return tl; } // start AFTER the first iteration of the infinitely repeating stuff... let master = gsap.timeline({delay: createInfiniteStuff().duration()}); master.to(...) .to(...); 17 minutes ago, jsco said: I take it there's no built-in way to accomplish this then, right? It really wouldn't make much logical sense to do that. Or it could cause other logic issues as well as performance challenges. For example, it'd have to add a bunch of logic to every totalProgress() call to loop through every child, find the ones that have an infinite repeat, exclude those from the calculation, and then do the calculation. Definitely no ideal. And I think you're the only person I've ever heard request this in all my years of doing this, so I don't think it'd be something that a lot of people would use (and everyone would be forced to pay the kb/performance price for it). See what I mean? You could definitely write a function that'd do it for you, but of course it'd suffer from the same performance issue. Probably not noticeable in real-world situations unless you're doing thousands of tweens but still - I tend to obsess about performance. 2 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