Jump to content

Voxel Fox

SVG Draw bug in firefox?

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 There,


So I've recently completed an animation using a "mask" like effect to reveal a string of handwritten text. This animation works great in Chrome, Safari and even IE(!) but in firefox the dash-array and dash-offset seem to have values that are far too small creating a really weird effect (see codepen.)


Is this a known issue? Or have I set something up wrong in my SVG file? Any guidance would be appreciated.

See the Pen BNwzym by kara-todd (@kara-todd) on CodePen

Link to comment
Share on other sites

Hi Voxel Fox  :)


pls check these DrawSvg examples : http://codepen.io/collection/DYmKKD/


all works correctly as expected in FF . so , i don't think there's a any bug in this case and that's better to provide a reduced pen as possible to find the problem .

  • Like 1
Link to comment
Share on other sites

My guess is that FireFox is mis-reporting the length of the path.


This is a reduced version so that other's can see what may or may not be happening:



I removed the map and everything that isn't the stroke that is animating. 


We will look into this further

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