Workarounds for animation for IE or Edge

[Karma Blackshaw]

I have an svg animation, it works great in chrome however, in other browsers such as Edge of IE, it seems stuck. Are there any workarounds for this ?

PS: I don't have enough budget for DrawSVG yet haha

See the Pen QWbpoea?editors=1111 by karmablackshaw (@karmablackshaw) on CodePen

[GreenSock]

Hey @Karma Blackshaw. When I built DrawSVGPlugin I put a lot of effort into working around various browser bugs and inconsistencies. There are quite a few and I don't even remember them all. Firefox, Safari, and Microsoft browsers all had bugs/quirks when animating strokeDashoffset. One of my goals with GSAP is to deliver tools that work really well across browsers so you don't have to worry about that stuff. 

 

This probably won't solve your browser issues but you can definitely simplify your code into a single tween like this: 

gsap.fromTo("#solution", {
  attr: { pathLength: 1 },
  strokeDasharray: 1, 
  strokeDashoffset: 1
}, {
  duration: 15, 
  strokeDashoffset: 0,
  autoRound: false // otherwise, px-based values (which strokeDashoffset defaults to) are rounded to the closest whole pixel.
});

Notice I'm using regular CSS, camelCased values for strokeDasharray and strokeDashoffset because those are valid CSS. I don't think pathLength is, though, so that's an attribute.

 

Anyway, I wish you luck with the project! Hopefully you'll be able to join Club GreenSock soon and just use DrawSVGPlugin for stuff like this. My guess is that it'll pay for itself within one project when you factor in all the time you may spend wrestling with browser issues.  But I totally get it - sometimes the budget just doesn't allow for something no matter how much you'd like it. No worries!

[Karma Blackshaw]

I see. Very well! Thanks for the tips, maybe soon I can join the Greensock Club  Thank you!

[mikel]

Hey @Karma Blackshaw,

 

If you like SVG handwriting, arrange some lines (pay attention to the stroke-width!) and You could use the attrPlugin:

 

See the Pen poJeXEe by mikeK (@mikeK) on CodePen

 

Happy writing ...

Mikel