search

motiondivision / motion

A modern animation library for React and JavaScript
https://motion.dev
MIT License
25.66k stars 842 forks source link

[BUG] transformOrigin is not dynamically calculated for SVG elements hidden on initial render #2847

Open njesenberger opened 3 weeks ago

njesenberger commented 3 weeks ago

transformOrigin is not dynamically calculated and defaults to 0px 0px for SVG elements that are not displayed on initial render because they or their parent are set to display: none.

Minimal reproduction on CodeSandbox

Steps to reproduce:

  1. Click on the “Toggle” button to change the SVG element display from none to initial
  2. The square rotates from the top left corner instead of rotating from the center

Expected behavior:

transformOrigin should be dynamically calculated based on originX and originY values.

Note:

A workaround for elements that do not need a dynamic transformOrigin is to manually set originX and originY as strings (either px or %).

Documentation mentions the same workaround for animating scale and rotate on SVG elements with server-side rendering.

Related issue: #621