Jump to content


SVG handwriting animation doesn't render correctly on Edge

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



I made this handwriting type animation using <clipPath>ed letters and moving mask paths, done with GSAP. It renders correctly in every browser I tested, but not on Edge. Edge seems to clip every clipPath letter to a small shape. I don't know if this problem is related to GSAP, but every idea on this matter would be greatly appreciated!



See the Pen xEzyAo by alexpi (@alexpi) on CodePen

Link to comment
Share on other sites

Hello alexpi, and Welcome to the GreenSock forum!

Thank you for the example, very helpful .. please standby while we try to offer a solution!



Link to comment
Share on other sites

Very cool animation. Slick.


I don't have a lot of time to research at the moment, but two quick things come to mind:

  1. You might want to read the posts here: http://greensock.com/forums/topic/13681-svg-gotchas/?p=65150. Blake's comment was related to masks, so it may not be relevant with clipping paths, but perhaps you'll find something there that's worth trying. 
  2. I noticed that you're not using DrawSVGPlugin, but instead you're directly animating the strokeDashoffset which is totally fine but I remember running into some bugs/problems in Microsoft browsers and implementing workarounds inside of DrawSVGPlugin. In other words, it might behoove you to try DrawSVGPlugin and see if it resolves the issue for you. Try it out on codepen for free (any of the bonus plugins) - here are the URLs: http://codepen.io/GreenSock/full/OPqpRJ/

Let us know if that helps at all. 

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