[Bug] Scroll breaks when using it on a svg or svg path

[tsharms]

Bug description:

I would like to add an animation to an SVG based on scroll using Motion One. As an example, I have created a very simple SVG that rotates on scroll. When I apply the animation to the parent div, it works without any issues. However, when I move the animation class to the SVG (path or SVG element, it doesn't matter), my browser window completely freezes and becomes unresponsive. I have tested this in Safari, Firefox, and Chrome, and all three browsers exhibit the same behavior.

If I remove the scroll function around the animation, the animation starts working again.

Example Codesandbox links:

I have created three sandbox links, and the only difference between them is the element being animated.

Working example
https://codesandbox.io/s/motion-scroll-working-example-gcx84c

Working example but only animates without scroll
https://codesandbox.io/s/motion-working-example-kxcjwc?file=/src/index.js

Breaking example (open with caution because browser window will break)
https://codesandbox.io/s/motion-scroll-breaking-example-t5jq2c?file=/index.html

[arnojong]

Has anyone looked into this yet? I have the same issue.

[liamlyness97]

Was this fixed or did you find an fix for this?