SVG Character Animation

Use this skill when animating character rigs made from SVG parts.

Runtime Rules

• Animate transforms (x, y, scale, rotation) rather than layout.
• Use timelines for multi-part acting beats.
• For SVG elements, use stable pivots (svgOrigin or correctly scoped transform origins).
• In Remotion, do not let GSAP advance with requestAnimationFrame; drive a paused timeline from the current frame.

Browser Pattern

gsap.set("#arm_right", { svgOrigin: "390 310" });
const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });
tl.to("#head", { rotation: -8, duration: 0.2 })