Jump to content


Scaling (zoom) SVG in Firefox

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've been working long on the chart for the client yet I cannot solve the slow Firefox zoom problem. Here's the limited version of the SVG chart that exibits the problem:



Now please try to click on the light blue areas (of the cow drawing shown). The neck and the part at the top are set to be zoomed (scale-d) two times while the bottom parts are set to zoom to three times larger.


The (zoom) animation is slow and unusable on Firefox (when other parts are added, even in this limited version the slowness is noticable). Safari and Google Chrome are great - testing all this on MacBook Pro, Windows experience is similar. Because of the shaking text animations I have already scripted timelines to have text appear after the zoom ends.


Is that because of the (known) scaling bug in the Firefox? I've tested different tricks mentioned in the forum (rotate by 0.01, z etc) yet it doesn't help.


When I have explained the issue to the client I thought about simple changing the viewbox of the SVG e.g. having a final view a zoom by using SVG attributes and GreenSock somehow animated the tween (if it would not call scale command implementation).


Dear community members, is there any workaround to get same fast animation like in Chrome and Safari? And no, no Flash please - never scripted it. :-)

See the Pen mJMRMX by mattsrinc (@mattsrinc) on CodePen

Link to comment
Share on other sites

No clue? Anybody? Is zooming few tens of SVG paths really so problematic in Firefox? :huh:

Link to comment
Share on other sites

It appears FireFox does struggle a bit.

I didn't have time to investigate your svg or code in detail but it seems you are animating a bunch of things (circles, lines, text) while the cow is growing and I really don't know what those tweens do. Simplifying the animation appears to help quite a bit



  • Like 2
Link to comment
Share on other sites

Thanks, Carl, encouraging as always. The problem is zooming in to double and triple scale:

that you can try by changing scale in your pen to 2.0 (or 3.0). I guess we have to resolve this to Firefox bug. Even if I remove all those texts, lines and circles blurring the speed is the same so animating the whole chart is slow in FF.


What about the idea of animating to viewbox (attribute of SVG tag) changed values etc?

Link to comment
Share on other sites

Thanks for the video. Very strong evidence against FireFox. Hopefully they put some effort into fixing that. I can only imagine SVGs becoming more and more popular.


I haven't experimented with animating viewbox attributes so I'm not sure if that will work any better. 

Link to comment
Share on other sites

Thanks again. Luckily they said they will accept current script with cosmetic changes, not GreenSock related (we knew that, right? :mrgreen: ).


I'll post another comment when Firefox (team) fixes that. On to new TweenLite and TimeLine script. With an owl!

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

We've come across this issue as well recently. Can anybody point me to a Firefox bug specifically pertaining to this issue? If there isn't one, it would be good to create one so we can keep track of progress.

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.