Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alexpi

SVG handwriting animation doesn't render correctly on Edge

Recommended Posts

Hello, 

 

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 post
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 post
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 post
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.

×