Initially paused timeline will not play; button click tl.play() doesn't play

[896terv8iygaedv]

Check out my Codepen. I tried to make it as barebones as possible.

 

The desired effect is that clicking the button morphs the SVG.

Why isn't this working?

Why does GSDevTools show the timeline is 0:00 when tl.pause() exists, but shows 2:50 when it's removed?
Why is the duration 2:50 when I have it set to duration 2?

Edit: I've updated the code below and commented out GSDevTools.create() as suggested. Now it's working.

See the Pen WNYxLyo by md398asdg07 (@md398asdg07) on CodePen

[Cassie]

Hi there!

 

If you pass the timeline in to GSDevTools you get a 2second animation controllable by devTools.

If you comment out dev tools then the click event successfully plays the tl.

You can't have both together as they conflict. 

See the Pen oNQLmMx?editors=0010 by GreenSock (@GreenSock) on CodePen

I don't get 2:50, but I do get 2:10 if I remove the paused and GSDevTools is controlling the global timeline. Not entirely sure why, tagging in @GreenSock for this one.

[GreenSock]

6 hours ago, Cassie said:

I don't get 2:50, but I do get 2:10 if I remove the paused and GSDevTools is controlling the global timeline. Not entirely sure why, tagging in @GreenSock for this one.

Yep, that all looks normal to me. Typically it's best to define an animation for the GSDevTools to control. If you don't, it'll default to the global timeline. Imagine the global timeline as if it starts playing as soon as the page loads GSAP. Well, it takes a few milliseconds (or a few hundred milliseconds) for the page to parse everything and start executing the JavaScript, so the new animation you create may have a startTime on the main timeline of 0.1 or 0.2 or 0.523 or however many seconds between GSAP loading and the page executing JavaScript on the first frame. That's why the GSDevTools scrubber may end at something like 2:10 or 2:30 for your 2-second animation. There's a gap of :10 or :30 or whatever at the start of the global timeline. 

 

But again, I'd strongly recommend defining an animation for the GSDevTools to keep it all clean. 

 

Does that clear things up? 

[896terv8iygaedv]

Thanks Cassie. Thanks Jack. Your replies have cleared everything up for me. This forum and you all are the best!