svg-character-animation
Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.
Best for SVG character animationWorks with GitHubLow risk
⌘source
- author
@calesthio- language
- Python
★3.2kstars
640forks
Apr 29, 2026
✦overview.md
Key Features
- ·Animate SVG rigs with GSAP
- ·Use CSS transforms for pivot control
- ·Drive paused timelines from Remotion frames
- ·Validate with HyperFrames CLI
- ·Multi-part acting beats via timelines
Use Cases
- →Animating a character's arm wave in a scene
- →Creating a blink cycle for an SVG face
- →Producing a looping walk cycle for a game asset
- →Previewing a lip-sync animation before final render
Best for
- ✓SVG character animation
- ✓Remotion video production
- ✓Interactive web stories
Not ideal for
- !Static SVG generation
- !CSS-only animations
FAQs
name
svg-character-animation
description
Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.
license
MIT
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 (
svgOriginor 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 }, "<");
Remotion Pattern
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.
$install
1-click copynpx skills add calesthio/OpenMontage --skill svg-character-animationSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
4/ 5
highMostly actionable with clear steps; only a few small gaps remain.