skills.rest
mooch10
mooch10COMMUNITY
Explore all skills by this author →
GitHub

svg-character-animation

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

1|Updated Aug 28, 2026
Search Tags:#timeline#animation#svg#gsap#remotion#hyperframes#character rig
One-click install
npx skills add https://github.com/mooch10/mochiptos --skill svg-character-animation-mooch10
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-character-animation
Source: https://github.com/mooch10/mochiptos/tree/main/frontend/.agents/svg-character-animation
Command: npx skills add https://github.com/mooch10/mochiptos --skill svg-character-animation-mooch10

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, remotion.

What problem does it solve? Animating multi-part SVG character rigs often leads to disconnected limbs, drifting pivots, and non-deterministic playback when rendering frame-by-frame in video pipelines. This Skill provides proven patterns for keeping character parts connected and animations deterministic across browsers, Remotion, and HyperFrames. ## Core Features & Use Cases - Transform-Based Animation: Animate x, y, scale, and rotation with stable SVG pivots using svgOrigin instead of layout properties. - Timeline Sequencing: Coordinate multi-part acting beats (head turns, arm gestures, blinks) with GSAP timelines. - Deterministic Remotion Rendering: Drive a paused GSAP timeline from useCurrentFrame so rendering never depends on requestAnimationFrame timing. - Use Case: You are building an animated explainer video in Remotion with an SVG mascot. Use this Skill to rig the mascot's arm wave and head tilt so every rendered frame matches the preview exactly. ## Quick Start Animate my SVG character so the head tilts and the right arm waves, using GSAP with correct svgOrigin pivots and a Remotion 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 SVG elements with GSAP?▼

Animate transform properties like x, y, scale, and rotation rather than layout attributes. For SVG elements, set a stable pivot with svgOrigin, for example gsap.set("#arm", { svgOrigin: "390 310" }), then tween rotation on a timeline.

How to sync GSAP animations with Remotion frames?▼

Create a paused GSAP timeline and drive it from useCurrentFrame by setting timeline.progress(frame / durationInFrames). Never let GSAP advance via requestAnimationFrame, since Remotion renders frames deterministically out of real-time order.

Why do SVG character parts drift apart during rotation?▼

Parts drift when the transform origin is not set to the joint position. Use svgOrigin with the exact pivot coordinates of the joint, or correctly scoped transform origins, so limbs rotate around their connection points.

Can I use GSAP timelines for multi-part character acting?▼

Yes, GSAP timelines sequence multi-part beats like head turns and arm gestures using position parameters such as "<" to start tweens together. Keep blinks, gaze, and mouth shapes as separate readable tracks for clear expression.

What are the limitations of CSS layout animation for SVG rigs?▼

Animating layout properties causes reflow, inconsistent rendering, and broken part connections in SVG rigs. Transform-only animation (x, y, scale, rotation) is GPU-friendly and keeps pivots stable across browsers and video renderers.

Related Skills

Explore More Design & Creative Skills→
CoRLab-TechCoRLab-Tech

figma-illustration-import

Import Figma vector illustrations into React components with SVG/PNG assets and Storybook stories.

Official
Intermediate
openvettaopenvetta
154

remotion-video

Create, edit, and render Remotion React video projects to MP4 in the workspace.

Official
Intermediate
video-production-buddyvideo-production-buddy
602

character-animation-qa

Validate character animation assets with rig, motion, and media checks.

Official
Intermediate
norrbackanorrbacka

threejs-animation

Create and manage Three.js animation systems for GLTF characters and clips.

Community
Intermediate