Jump to content
Search Community

Issues with drawSVG stroke-dasharray mask animation in IE EDGE only

ceindeg test
Moderator Tag

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

Hi I really hope someone can help, I've got a pie chart animating perfectly in all browsers EXCEPT IE Edge. It even works in IE10 / 11 fine. Just Edge I'm having issues with. It doesn't render anything.


If I remove the tween animation then it renders fine, so the issue can't be with the mask - it's got to be with the tween.


I've researched the forums and seen other code pens (by other devs) using the same concept that don't work in Edge edge either, here's one example:

See the Pen ZWEqdK by PointC (@PointC) on CodePen

 again it works fine in all other browsers, just Edge!


Any help will be much appreciated. I'm scratching my head here.




See the Pen bvLOJj by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi @ceindeg :)


Edge is being a bit fussy lately with masks. If you add a tiny rotation to the tween, it'll force Edge to redraw the mask. Something like this.


tl.from(".mask-anim", 2, {ease: Power4.easeOut, rotation:-90.01, drawSVG:"0%"}, 0.3);


See the Pen WzMPyV by PointC (@PointC) on CodePen

This is actually the same odd issue we were discussing in this thread.

Hopefully that helps. Happy tweening.



  • Like 4
  • Thanks 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.
  • Create New...