Jump to content


SVG breaking when scaling

Recommended Posts

Hi. I created a simple SVG witch is nothing more than a black rectangle that covers the screen and a transparent circle in the middle. Its purpose is to give the appearance of zooming in/out on the image behind it, thereby blocking out the image except for what is seen through the transparent circle. The above code works fine when I am scaling up, then down, in one motion. However, when I am only wanting to scale down, to draw the circle to the center of the screen, the code behaves in a hap-hazard way. The black rectangle scales improperly. I have tried different approaches, like using opacity zero when scaling-up, then switching to opacity 1 to show the effect, but the result is always the same. If you uncomment the line of js code, you'll see what I am getting. Please have a look at my pen (my first, owing to the demo you provided :0)  Note: the pen that is embedded is not running correctly. But does so when I paste the url into the browser. 

See the Pen wbdgQv by don199 (@don199) on CodePen

Edited by payne199
demo not rendering properly
Link to comment
Share on other sites

A few things...

  1. Sounds like an immediateRender thing. Try setting immediateRender:false on your from() tween. To learn more, see https://greensock.com/immediateRender
  2. I'd recommend being very careful about scaling things to such a large degree because it could cause rendering challenges with the browser (unrelated to GSAP). In your demo, you're scaling it to 14,500% which makes the bounding box HUUUUGE. The browser cares about how many pixels change on the screen, as dictated by the bounding box, so you're asking a LOT of the browser. Chrome is notorious for having issues with elements that are promoted to a new layer (to benefit from GPU acceleration). I noticed some artifacts until I set force3D:false which basically tells GSAP not to automatically layerize things for GPU acceleration. It's somewhat related to the whole "will-change" thing which I detail here: https://greensock.com/will-change

Does that help?

Link to comment
Share on other sites

Not quite sure what you're doing, but you can also animate the viewBox. Here are a couple of old pens that show the technique.


See the Pen OMabPa by PointC (@PointC) on CodePen


See the Pen XbqBmM by PointC (@PointC) on CodePen

  • Like 1
Link to comment
Share on other sites

Thank you, gentlemen. Very helpful/educational.

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