Animate SVG group using rotationY

[Sites Built Fast]

Struggling to figure out how to accomplish this in GSAP:

<svg id="cubes" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100">
        <g class="group-1">
            <rect x="15" y="15" width="10" height="10"/>
            <rect x="35" y="15" width="10" height="10"/>
            <rect x="15" y="35" width="10" height="10"/>
            <rect x="35" y="35" width="10" height="10"/>
        </g>
        <g class="group-2">
            <rect x="55" y="15" width="10" height="10"/>
            <rect x="75" y="15" width="10" height="10"/>
            <rect x="55" y="35" width="10" height="10"/>
            <rect x="75" y="35" width="10" height="10"/>
        </g>
        <g class="group-3">
            <rect x="15" y="55" width="10" height="10"/>
            <rect x="35" y="55" width="10" height="10"/>
            <rect x="15" y="75" width="10" height="10"/>
            <rect x="35" y="75" width="10" height="10"/>
        </g>
        <g class="group-4">
            <rect x="55" y="55" width="10" height="10"/>
            <rect x="75" y="55" width="10" height="10"/>
            <rect x="55" y="75" width="10" height="10"/>
            <rect x="75" y="75" width="10" height="10"/>
        </g>
    </svg>

const group1 = document.querySelector('#cubes .group-1');
group1.style.transformBox = 'fill-box';
group1.style.transformOrigin = '50% 50%';
group1.style.transformStyle = 'preserve-3d';
let rot = 0;
setInterval(() => {
    if (rot++ > 360) rot = 0;
    group1.style.transform = `rotateY(${rot}deg)`;
}, 10);

 

Tried as follows:

gsap.set('#cubes .group-1', {
    transformBox: 'fill-box',
    transformOrigin: '50% 50%',
    transformStyle: 'preserve-3d',
});
gsap.to('#cubes .group-1', {
    duration: 3.6,
    repeat: -1,
    rotationY: 360
});

 

The following attributes are applied to#cubes .group-1 but no animation occurs:

<g class="group-1" data-svg-origin="30 30" transform="matrix(1,0,0,1,0,0)" style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px; transform-style: preserve-3d; transform-box: fill-box;">

 

As I understand it, GSAP is supposed to be applying some matrix magic under the hood, but that magic does not appear to be working for me.

See the Pen ExMGLGO by SitesBuiltFast (@SitesBuiltFast) on CodePen

[GreenSock]

The SVG spec itself does not support 3D properties. You can't reliably animate rotateY() across browsers. It's not a GSAP thing, it's a browser/spec thing. You could probably simulate it by animating scaleX instead (which can go negative). 

See the Pen ZEPVqem?editors=0010 by GreenSock (@GreenSock) on CodePen