skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

svg-character-animation

Animate SVG character rigs using GSAP timelines, CSS transforms, and Remotion frame control.

Updated Jul 16, 2026
Search Tags:#timeline#animation#svg#gsap#remotion#transform#character rig
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill svg-character-animation-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-character-animation
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/svg-character-animation
Command: npx skills add https://github.com/X-manist/Cohmira --skill svg-character-animation-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, remotion.

What problem does it solve? Animating characters built from SVG parts is error-prone: pivots drift, parts disconnect, and GSAP's requestAnimationFrame loop conflicts with frame-based renderers like Remotion. This Skill provides the runtime rules and code patterns needed to animate SVG rigs correctly across browsers, Remotion, and HyperFrames. ## Core Features & Use Cases - Transform-Based Animation: Animate x, y, scale, and rotation with stable SVG pivots using svgOrigin so parts stay connected during motion. - Timeline Sequencing: Build multi-part acting beats with GSAP timelines for coordinated head, arm, and facial movements. - Remotion Frame Control: Drive a paused GSAP timeline from useCurrentFrame so rendering stays deterministic instead of relying on requestAnimationFrame. - Use Case: You have an SVG mascot with separate head, arm, and eye elements. Use this Skill to add a wave gesture and blink cycle, then render it frame-accurately in a Remotion video. ## Quick Start Animate my SVG character rig so the right arm waves and the head tilts, using GSAP with correct svgOrigin pivots and a Remotion-compatible frame-driven timeline.

Frequently Asked Questions about svg-character-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I animate an SVG character with GSAP?▼

Animate SVG character parts by setting a stable pivot with gsap.set and svgOrigin, then build a GSAP timeline that tweens rotation, x, y, and scale. Sequencing multiple parts on one timeline creates coordinated acting beats.

How to use GSAP animations inside Remotion?▼

In Remotion, do not let GSAP advance with requestAnimationFrame. Create a paused timeline and drive it from the current frame by calling timeline.progress(frame / durationInFrames) inside useCurrentFrame.

Why do SVG parts drift apart during rotation animation?▼

Parts drift when the transform origin is wrong. Use svgOrigin with the exact pivot coordinates, such as gsap.set("#arm_right", { svgOrigin: "390 310" }), so limbs rotate around their joint instead of the element center.

Should I animate SVG layout attributes or CSS transforms?▼

Animate transforms (x, y, scale, rotation) rather than layout attributes. Transform-based motion is smoother, avoids layout recalculation, and keeps pivots predictable for character rigs.

Can GSAP SVG animations be validated before final render?▼

Yes. For HyperFrames workflows, use HTML/SVG/GSAP components with deterministic timelines and validate the composition via the HyperFrames CLI before final rendering.

Related Skills

Explore More Design & Creative Skills→
47thtechcorner47thtechcorner
21

svg-character-animation

Animate SVG character rigs with GSAP timelines and CSS transforms.

Community
Advanced
lukaskellersteinlukaskellerstein
3

demo-assembly

Assembles measured clips and narration into demo videos via Remotion or Final Cut Pro export.

Community
Advanced
calesthiocalesthio
55.1k

svg-character-animation

Animate SVG character rigs with GSAP timelines, Remotion frame control, and HyperFrames previews.

Community
Intermediate
firstsun-devfirstsun-dev
3

threejs-animation

Implements keyframe, skeletal, morph target, and blended animations in Three.js scenes.

Official
Intermediate