Jump to content
payne199

SVG breaking when scaling

Recommended Posts

Posted (edited)

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. https://codepen.io/don199/pen/wbdgQv

Edited by payne199
demo not rendering properly

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thank you, gentlemen. Very helpful/educational.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.