Jump to content


zooming and transform-origin

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



Noticed something when zooming in (ctrl + +) in browser the transform origin doesn't scale properly. Is this a bug or am I doing something wrong here?





See the Pen tcnld by skorpa (@skorpa) on CodePen

Link to comment
Share on other sites

If you delete all javascript from that pen, remove the circles from the svg, and add

svg .mark {
    transform: rotate(180deg);
you will see the same thing still happens. I don't know if it's a browser bug, an SVG thing, something specific to the way your page is styled or whatever else it could be, but it's the same whether you use GSAP or not.


It's not a solution, but I'm not too familiar with SVG and it's quirks yet so I don't have much advice to offer, sorry =(

Link to comment
Share on other sites

Looks like Jamie is right. Even though the link is from Microsoft.. it covers zooming and panning in SVG.




An excerpt from that resource might explain that behavior which is not a GSAP issue, but the way SVG zoom and pan works in the browser:


Normally, SVG graphical objects are drawn relative to (that is, within) this user space (that is, user coordinate system). For zooming and panning with relatively static graphics, SVG graphical objects are generally never moved within their user coordinate system; instead, the user coordinate system itself is moved (along with all of its “attached” graphics) within (relative to) the SVG viewport. Thus from the viewport’s perspective, the graphical objects have moved. Stated another way, you generally move or transform the user coordinate system that graphical objects are “attached” to, not the graphical objects themselves.


Does it also happen if you use the browser zoom controls.. not the zoom / pan controls of SVG.


Also what browser dis you see this in?


Just my two cents, or one :)

Link to comment
Share on other sites

Hey, thanks for the replies


sorry about the bloated code example


Does it also happen if you use the browser zoom controls.. not the zoom / pan controls of SVG.


Not shure what you mean, the problem was with browser zoom initially.


Turns out Firefox has some problems with svg element transform origin as well. Found some solutions on stackoverflow, alternatively you could just wrap the animated elements into seprate svg-s and transform those, avoiding all the innter svg schinanigans.

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.