Svg Character Animation

calesthio/OpenMontage/.agents/skills/svg-character-animation

by calesthio9327439db69021ab4b0e2776729bf3b58fdb5a87MIT65K starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 5 days ago

Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.

Instructions onlyDesign & Creative

AI-generated overview

Guides animating SVG character rigs with GSAP timelines, CSS transforms, Remotion frame control and HyperFrames previews.

What it does: This skill provides instructions for animating character rigs built from SVG parts. It covers runtime rules such as animating transforms instead of layout, using timelines for multi-part acting beats, and setting stable pivots with svgOrigin. It also shows browser, Remotion and HyperFrames patterns and includes a quality checklist for pivots, facial features, pose holds and frame sampling.
When to use it: Use it when animating character rigs made from SVG parts. It fits work that needs GSAP timelines, transform-based motion, or frame-driven playback in Remotion and HyperFrames-compatible browser previews.
Requirements: No scripts are shipped; it is instructions only. It assumes GSAP, Remotion and HyperFrames-compatible browser tooling, and references external documentation links.

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 })  .to("#arm_right", { rotation: 35, duration: 0.4 }, "<");

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

Remotion Pattern

tsx

const frame = useCurrentFrame();const progress = frame / durationInFrames;timeline.progress(progress);

const frame = useCurrentFrame();const progress = frame / durationInFrames;timeline.progress(progress);

HyperFrames Pattern

Use HTML/SVG/GSAP components with deterministic timelines and validate via the HyperFrames CLI before final render.

Quality Checklist

Parts stay connected at pivots during motion.
Blinks, gaze, and mouth shapes are separate enough to read.
Pose holds are long enough to communicate emotion.
Frame sampling shows meaningful deltas, not frozen animation.

Sources

GSAP core transform properties and SVG handling: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/
GSAP timelines and sequencing: https://gsap.com/docs/v3/GSAP/Timeline/
Remotion useCurrentFrame: https://www.remotion.dev/docs/use-current-frame

Source and attribution

Source:calesthio/OpenMontagein.agents/skills/svg-character-animationat commit9327439

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Svg Character Animation

SVG Character Animation

Runtime Rules

Browser Pattern

Remotion Pattern

HyperFrames Pattern

Quality Checklist

Sources

Source and attribution

More from calesthio/OpenMontage

Web Design Guidelines

Vercel React Best Practices

Visual Style

Video Understand

Video Edit

Video Download

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design