skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

svg-character-animation

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

Updated Sep 1, 2026
Search Tags:#timeline#animation#svg#gsap#remotion#hyperframes#character rig
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill svg-character-animation-zamansepeti43
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-character-animation
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/svg-character-animation
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill svg-character-animation-zamansepeti43

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animating multi-part SVG character rigs often leads to broken pivots, disconnected limbs, and non-deterministic playback in video renderers. This Skill provides proven patterns for transform-based animation that keep character parts connected and render consistently across browsers and Remotion. ## Core Features & Use Cases - Transform-Based Rig Animation: Animate x, y, scale, and rotation with stable svgOrigin pivots so limbs and facial features stay attached during motion. - Deterministic Remotion Rendering: Drive a paused GSAP timeline from useCurrentFrame instead of requestAnimationFrame, guaranteeing frame-accurate video output. - HyperFrames Validation: Build HTML/SVG/GSAP components with deterministic timelines and validate them via the HyperFrames CLI before final render. - Use Case: Animate a cartoon character's head tilt and arm wave for a Remotion video, with blinks and mouth shapes timed as separate readable beats. ## Quick Start Animate my SVG character rig so the head tilts and the right arm waves, using GSAP pivots and a frame-driven Remotion 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 rig with GSAP?▼

Animate transform properties like x, y, scale, and rotation rather than layout attributes. Set stable pivots with svgOrigin, then sequence movements on a GSAP timeline so multi-part acting beats stay synchronized.

How to use GSAP animations inside Remotion videos?▼

Do not let GSAP advance via requestAnimationFrame in Remotion. Create a paused timeline and drive it from the current frame by setting timeline.progress to frame divided by durationInFrames for deterministic rendering.

Why do SVG body parts detach during rotation animation?▼

Parts detach when the transform origin is wrong for the SVG coordinate system. Use svgOrigin with the exact pivot coordinates, such as a shoulder joint, so rotation happens around the connection point instead of the element center.

Can I preview GSAP SVG animations in the browser before rendering?▼

Yes, the browser pattern uses standard GSAP timelines with svgOrigin pivots that play directly in the page. For HyperFrames projects, validate the component with the HyperFrames CLI before final render.

What makes character animation readable in short video clips?▼

Keep blinks, gaze shifts, and mouth shapes as separate, clearly timed beats, and hold poses long enough to communicate emotion. Sample frames to confirm meaningful motion deltas rather than frozen or jittery animation.

Related Skills

Explore More Design & Creative Skills→
calesthiocalesthio
55.1k

character-rigging

Build data-driven 2D character rigs with parts, pivots, constraints, and reusable rig packages.

Community
Intermediate
eprouvezeeprouveze

mvt-video-generator

Orchestrates ElevenLabs text-to-speech and Remotion rendering to generate AI avatar videos.

Community
Advanced
X-School-AcademyX-School-Academy
19

media-video-lipsync

Align a reference video's lip movements with a new audio track using MuseTalk CLI.

Official
Intermediate
hanzoaihanzoai

lottie-bodymovin

Translate Disney's 12 animation principles into Lottie vector animations from After Effects exports.

Official
Intermediate