Fix the SVG transform-origin during initial mount by Taeyeon-Lim · Pull Request #3154 · motiondivision/motion

Taeyeon-Lim · 2025-04-15T13:30:29Z

Dimension is measured on the client side. Therefore, the origin cannot be measured on the first mount, resulting in a jump. Before the dimension is measured, set transformBox to "fill-box" and center the origin to leave the initial origin to the browser.

This is only valid when manually calculating the last value of transformOrigin.

ref: #2949

…2949) Dimension is measured on the client side. Therefore, the origin cannot be measured on the first mount, resulting in a jump. Before the dimension is measured, set "transformBox" to "Fill Box" and center the origin to leave the initial origin to the browser. This behavior is only valid when manually calculating the last value of "transformOrigin".

mattgperry · 2025-04-15T13:34:56Z

I'm a little concerned about the extra bundle size here, but I have to ask, if this works, is it possible for us to just ditch measuring the SVG elements entirely and use this fill-box instead?

Taeyeon-Lim · 2025-04-15T13:51:29Z

Unfortunately, I don't know exactly what context "calcSVGTransformOrigin" was added in, so it's hard to give you a definite answer. "fill-box" is widely used, but I think I can keep "calcSVGTransformOrigin" if it requires a manual accurate calculation.

As a temporary measure, I took the form of leaving the server to the browser. I need to make sure most browsers guarantee the same behavior of the "fill-box" and "transform-origin: 50% 50%" combination. What I've checked are firefox and chrome browsers.

For now, I think it's possible. However, I think someone might want to use "view-box". I think we might consider whether to give this option to the user or not.

mattgperry · 2025-04-15T13:56:00Z

Ah ok - well currently as it stands the intended behaviour of all this measurement is to force transforms to apply to SVG elements the same way they do HTML elements. There's no option to have the default behaviour. So by setting originX: 0.1 we want an origin point thats 10% into the width of the SVG element itself, rather than the parent view box. In other words, if this behaviour is attainable by setting transform-box: fill-box we could replace all that logic with just that one style in useSVGProps

Taeyeon-Lim · 2025-04-15T14:05:41Z

Maybe, I think it's possible.

mattgperry · 2025-04-15T14:08:10Z

Having a quick play, this is what we're trying to do with all the measurements. This would be a big win for performance and filesize. Is this something you'd be interested in taking a look at or would you prefer me to give it a go?

Taeyeon-Lim · 2025-04-15T14:19:46Z

I'll try it.

Taeyeon-Lim · 2025-04-16T13:11:18Z

Hi, I have a question. The origin doesn't apply to HTML elements (not SVG). Wouldn't it be better if origin could apply to HTML elements as well?...or is it not necessary?

example

// HTML element origin
<motion.div style={{ originX : 0.1 }}  />

current : "50% 50%"
better(?) : "10% 50%"

mattgperry · 2025-04-16T14:15:34Z

@Taeyeon-Lim It should be the case that originX/Y already have this effect on transform-origin (see buildStyles)

Taeyeon-Lim · 2025-04-16T15:52:33Z

oh..., I understand. Thank you.

Change the existing origin calculation from manual to automatic. To do this, switch the transform-box style from the default value to 'fill-box'.

mattgperry · 2025-04-17T08:04:04Z

packages/framer-motion/src/components/Reorder/__tests__/server.ssr.test.tsx

        const staticMarkup = renderToStaticMarkup(<Component />)
        const string = renderToString(<Component />)

-        const expectedMarkup = `<article><main draggable="false" style="z-index:unset;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x"></main></article>`


This should only be the case if originX etc or transformOrigin have been explicitly set.

mattgperry · 2025-04-17T08:05:24Z

packages/framer-motion/src/motion/__tests__/ssr.test.tsx

        )

        expect(div).toBe(
-            '<div style="transform:translateX(100px) translateY(200px)"></div>'


Likewise we definitely don't want to set this if it wasn't explicitly set by the user - unless this is an SVG with a transform

mattgperry · 2025-04-17T08:05:59Z

packages/framer-motion/src/motion/__tests__/ssr.test.tsx

        )

        expect(rect).toBe(
-            '<rect mask="" class="test" style="background:#fff"></rect>'


How come this one doesn't have transform-box:fill-box?

mattgperry · 2025-04-17T08:07:21Z

packages/framer-motion/src/render/html/utils/build-styles.ts

     * undefined origins.
     */
-    if (hasTransformOrigin) {
+    if (hasTransformOrigin || style.transform) {


If you move this logic to the svg/utils/build-styles file this will remove the style from HTML elements

mattgperry · 2025-04-17T08:07:59Z

packages/framer-motion/src/render/svg/config-motion.ts

    useVisualState: makeUseVisualState({
        scrapeMotionValuesFromProps: scrapeSVGProps,
        createRenderState: createSvgRenderState,
-        onUpdate: ({


mattgperry · 2025-04-17T08:09:15Z

I left some comments, but this looks amazing. I think if we can get transform-origin from appearing in HTML elements then we're set.

Taeyeon-Lim · 2025-04-17T14:31:14Z

I'm sorry for the late response and thank you for the comment. Well, I got the default behavior wrong. What you said meant it only changed when you were given transform-origin or transform by the user...
I will remove the style.transform of html/utils/build-styles and change the transform-origin of SVG to operate when there is only transform-origin from html. If I do this, unlike HTML, if there is only transform, transform-origin will act like 0, 0 instead of 50% 50%, right? Or, should I include this case as well?

mattgperry · 2025-04-17T14:38:03Z

No rush! Yes good to default to 50% for SVG with transforms but to ensure HTML only gets an origin if one is defined

…

On Thu, 17 Apr 2025 at 16:31, ltys ***@***.***> wrote: I'm sorry for the late response and thank you for the comment. Well, I got the default behavior wrong. What you said meant it only changed when you were given transform-origin or transform by the user... I will remove the style.transform of html/utils/build-styles and change the transform-origin of SVG to operate when there is only transform-origin from html. If I do this, unlike HTML, if there is only transform, transform-origin will act like 0, 0 instead of 50% 50%, right? Or, should I include this case as well? — Reply to this email directly, view it on GitHub <#3154 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB34WKW2TQRL2JAQYNRQHN32Z63MPAVCNFSM6AAAAAB3FUSXB2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQMJTGEZTKNJVGI> . You are receiving this because you commented.Message ID: ***@***.***> *Taeyeon-Lim* left a comment (motiondivision/motion#3154) <#3154 (comment)> I'm sorry for the late response and thank you for the comment. Well, I got the default behavior wrong. What you said meant it only changed when you were given transform-origin or transform by the user... I will remove the style.transform of html/utils/build-styles and change the transform-origin of SVG to operate when there is only transform-origin from html. If I do this, unlike HTML, if there is only transform, transform-origin will act like 0, 0 instead of 50% 50%, right? Or, should I include this case as well? — Reply to this email directly, view it on GitHub <#3154 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB34WKW2TQRL2JAQYNRQHN32Z63MPAVCNFSM6AAAAAB3FUSXB2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQMJTGEZTKNJVGI> . You are receiving this because you commented.Message ID: ***@***.***>

Taeyeon-Lim · 2025-04-17T14:48:33Z

I've understood your intentions clearly, and I'll take my time to ensure it's done well. don't worry

Modify the behavior of "transform-origin, -box" in SVG to apply user-provided values correctly. Changes include: - Default "transform" value set to "50% 50%" when "transform-origin" is not provided. - "transform-origin" applies the input value as is. - "transform" or "transform-origin" triggers the application of "transform-box: fill-box".

This type is no longer in use.

mattgperry · 2025-04-23T08:44:18Z

Thanks for your work on this @Taeyeon-Lim! There's just the conflicts to resolve and we can publish this - I'd do it myself but I'm getting a message that they're too complex to resolve in the web editor.

Taeyeon-Lim · 2025-04-23T15:11:35Z

I see, I'll try to solve it.

Taeyeon-Lim · 2025-04-23T15:58:00Z

The conflict is resolved, but the content has gotten a little messy. Is it better to do a new PR?

mattgperry · 2025-04-24T07:30:08Z

@Taeyeon-Lim No it's perfect, thanks for all your work on this!

The bug (SVG transform-origin jumping on initial mount) was fixed in PR #3154, which ensured transformBox: "fill-box" and transformOrigin: "50% 50%" are set before dimensions are measured. The fix was preserved during the motion-dom refactoring. This commit adds targeted E2E tests to prevent regression and closes the issue. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Taeyeon-Lim added 2 commits April 15, 2025 21:14

Updating tests

f3fae50

Taeyeon-Lim added 4 commits April 17, 2025 14:46

Measuring the transform-origin of SVG automatically

f1468d7

Change the existing origin calculation from manual to automatic. To do this, switch the transform-box style from the default value to 'fill-box'.

Updating tests

a23514a

Removing measurements related to SVG Dimensions

e740c6d

Updating tests for sypress

2f88f93

mattgperry reviewed Apr 17, 2025

View reviewed changes

mattgperry and others added 6 commits April 19, 2025 00:51

Fixing animateView durations

f378baa

v12.7.3

f446963

Adding force measure

885964e

Updating tests

4eb765f

Updating test for cypress

a35a489

Removing types related to dimensions in SVG.

b5586d0

This type is no longer in use.

mattgperry approved these changes Apr 23, 2025

View reviewed changes

Taeyeon-Lim force-pushed the fix/svg-transform-origin branch from bc2897c to 09c94a6 Compare April 23, 2025 14:48

Taeyeon-Lim force-pushed the fix/svg-transform-origin branch from 09c94a6 to b5586d0 Compare April 23, 2025 15:18

Taeyeon-Lim added 2 commits April 24, 2025 00:35

Merge branch 'main' into fix/svg-transform-origin

656b965

Resolve merge conflicts in the main branch

0223c83

Removing unused .yarn/cache

98c1248

mattgperry merged commit 3b2b3e8 into motiondivision:main Apr 24, 2025
3 checks passed

Taeyeon-Lim deleted the fix/svg-transform-origin branch April 25, 2025 06:09

mattgperry mentioned this pull request Mar 17, 2026

Add E2E tests for SVG styles on mount #3654

Open

4 tasks

Uh oh!

Conversation

Taeyeon-Lim commented Apr 15, 2025

Uh oh!

mattgperry commented Apr 15, 2025

Uh oh!

Taeyeon-Lim commented Apr 15, 2025

Uh oh!

mattgperry commented Apr 15, 2025

Uh oh!

Taeyeon-Lim commented Apr 15, 2025

Uh oh!

mattgperry commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Taeyeon-Lim commented Apr 15, 2025

Uh oh!

Taeyeon-Lim commented Apr 16, 2025

example

Uh oh!

mattgperry commented Apr 16, 2025

Uh oh!

Taeyeon-Lim commented Apr 16, 2025

Uh oh!

mattgperry Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

mattgperry Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

mattgperry Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

mattgperry Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

mattgperry Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

mattgperry commented Apr 17, 2025

Uh oh!

Taeyeon-Lim commented Apr 17, 2025

Uh oh!

mattgperry commented Apr 17, 2025 via email

Uh oh!

Taeyeon-Lim commented Apr 17, 2025

Uh oh!

mattgperry commented Apr 23, 2025

Uh oh!

Taeyeon-Lim commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Taeyeon-Lim commented Apr 23, 2025

Uh oh!

mattgperry commented Apr 24, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mattgperry commented Apr 15, 2025 •

edited

Loading

Taeyeon-Lim commented Apr 23, 2025 •

edited

Loading