Animating <path /> elements within an SVG

[thatcher-gaming]

hey folks,
i'm trying to animate a little svg that has some path elements within it. this is my wonderful code:

const svg = document.getElementById(id)!;
const paths = svg.querySelectorAll("path");
animate(
    paths,
    { scale: [1, 1.15], fill: [inactive, active] },
    {
        repeat: Infinity,
        repeatType: "reverse",
        delay: stagger(0.5),
    }
);

the equivalent code in v10 worked just fine, but after upgrading to v12 this no longer seems to work. is there a way to do this in the current version of motion? cheers

[bdrtsky]

Confirm, even simple transform broken on path element.

[bdrtsky]

@thatcher-gaming should be moved to issues, clearly a bug

[bdrtsky]

Worked fine in 12.0.0-alpha.2 btw @mattgperry

[huudi]

@thatcher-gaming I don't know if this helps in any way, but I made this which animates paths with the colours. Thrown in a timeline just for good measure ha!

https://codepen.io/huudistudio/pen/jEOrXoQ