Jump to content


drawSVG IE10 circle stroke animation glitchey

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey there.


Seem to be having some issues with the draw SVG plugin on IE when trying to animate a circles stroke around a central point to fill up the background. The Problem only occurs on IE When the dial type animation becomes glitchey. The Codepen example shows this.

See the Pen oXNovy by joshscorrar (@joshscorrar) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks for the pen

It looks like DrawSVGPlugin is doing its job and that it could just be an IE rendering issue that occurs when the stroke width is the same as the radius of the circle.

Knocking the stroke width down from 50 to 20 and everything looked smooth and clean.

Make it greater than 60 (even in other browsers) and the stroke will cut into itself too. 


Interested in other ideas, but that's my best assessment at the moment

  • Like 1
Link to comment
Share on other sites

Thanks for the Quick Reply.


Yeah I tried that too, really need the stroke too fill up the whole gray background.


Any other thoughts on how to achieve this effect using SVG? I can do it using canvas but I use drawSVG in many other places on my site and want to stick with one method of animating these effects. 

Link to comment
Share on other sites

  • Solution

Here is a test without DrawSVGPlugin, just to show how IE renders the stroke cutting into itself even when static:



I came a cool demo from a css-tricks article. It uses some CSS, uh, tricks. It's not SVG but I imagine it would be totally possible to control the animation with GSAP. 

  • Like 1
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.