🎯↻💥
You wrote a radial gallery. Each card sits on a ring via
transform: rotateY(var(--angle)) translateZ(280px). Then you GSAP-tween the ring's rotation and the cards collapse to the centre like a sad accordion. Welcome to the CSSPlugin clobber.
GSAP's CSSPlugin owns the transform property. The moment you animate rotation on a child, GSAP rewrites the entire inline transform, throwing away your translateZ. No warning. No deprecation notice. Just silently broken 3D.
The Money Pattern: never let GSAP touch transform directly on the element. Animate a CSS custom property via a proxy object, then compose it inside the stylesheet where you control the order.
Now the stylesheet owns composition. GSAP writes one variable. The browser does the rest.
Plot twist: this scales. Want each card to wobble while the ring spins? Add another proxy, another variable, compose it in the same transform chain. GSAP never fights the stylesheet because GSAP never touches transform at all.
The catch: @property still has spotty support if you need interpolation on a registered custom property. For raw setProperty writes on every frame you do not need it — GSAP is the interpolator, the variable is just a pipe. Also: transform-style: preserve-3d must live on the parent that owns the rotation, and every ancestor in between must not collapse the 3D context with a filter or overflow: hidden. Yes really.
The Verdict: stop letting GSAP own your transforms. Animate variables, compose in CSS, keep your preserve-3d chain intact. Your radial gallery will spin like it is supposed to, and the next person who reads your code will not have to learn about CSSPlugin internals to debug it.