Issue with GSDevTools

[Mamboleoo]

Hey there,

I'm currently working on some animation and I had noticed a different result in my animation if I enable the devtools or not.

Try the demo first without the tools to see the expected behaviour. Then uncomment the lines 8-10 to have the tools enabled and you will notice at the beginning of the animation that there is a path showing up that's not their without the devtools.

 

To explain the animation quickly: I have multiple paths that create the letter M. I clone each path and apply almost the same animation on both the original and the clone except that the original is getting a custom stroke-dasharray with to make some dots.

 

From my investigation, we can see that the clone of the first path is getting a wrong stroke-dasharray value (174.5, 50, 10, 174.5) while it should only get 174.5px like it is without the devtools.

What I couldn't figure out is why is this only happening on the first path, all the other are having correct values.

And it's getting even more weird that the value it gets comes from nowhere in my code.

 

This is obviously not a life-threatening issue as I won't need the devtools in production, but this demo is coming from an upcoming article so I'd like the readers to be able to easily replay the animation

 

Cheers,

Mamboleoo

See the Pen e02709baf82e465d5d6f0f49090f377c?editors=0010 by Mamboleoo (@Mamboleoo) on CodePen

[Carl]

Hi Louis,

Nice to see you. Greart demo.

Please try moving the GSDevTools.create() to the very end of your js after the forEach loop.

It appears to resolve the issue.

 

 

[Mamboleoo]

Ok that is very weird bug it works so.... Thanks

[GreenSock]

I believe that's because when you created your GSDevTools instance, your timeline was completely empty! So there's no duration, no animations in it, nothing. See what I mean?  It's definitely best to create it after you've populated your timeline/animation. 👍