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

[ceindeg 2 Likes (Newbie)]

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.

 

Thanks

Louisa

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

[PointC 8,599 Likes (Superhero)]

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.

 

[ceindeg 2 Likes (Newbie)]

AMAZING!! Thank you what a life saver