Jump to content
Search Community

Issue with GSDevTools

Mamboleoo test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

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 :)




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

Link to comment
Share on other sites

  • Solution

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.



  • Like 2
Link to comment
Share on other sites

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. 👍

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...