Timeline created 'paused' doesn't work (no duration visible on DevTools)

[PatronStudio]

I've just encountered a few things that are stumping me, have been refactoring some of my GSAP code in a NextJS app and cannot work out why a timeline created like gsap.timeline({ paused: true }) won't work, when I've had it working previously. Feel like I may be missing something obvious so I've made a minimal example using the Codesandbox Bonus example, simply switching the paused flag to false works to show a 6 second duration on DevTools.

 

[GreenSock]

If an animation is paused, its duration can't accurately be factored into its parent timeline (the global one in this case). It's almost always best to specify an animation on the GSDevTools instance: 

 GSDevTools.create({
   animation: tl,
   minimal: false
 });

Otherwise, it's defaulting to the global one. 

 

https://codesandbox.io/s/bitter-sky-7h8it2

 

Better? 

 

Thanks for being a Club GreenSock member, @PatronStudio 💚

[PatronStudio]

Ok thanks, I did previously have that setup but think I removed at some point during the refactor, then had some other things going on and thought it may have been a bug. Got it all sorted now, although weirdly still have a 0 duration showing on DevTools until you've started to play it, not a big issue though.

[GreenSock]

Hm, that sounds odd to me. If you'd like some help, just post a minimal demo and we'd be happy to take a peek. Did you make sure you're passing the animation into the GSDevTools? 

[PatronStudio]

Strangely opened the exact same setup today and is working fine. I did have some memory issues (Chrome eating it up) yesterday so possibly related to that.

 

Will try make a minimal demo if it re-occurs and is reproducible.