Animate characters built from SVG parts using GSAP and CSS transforms. Coordinate gestures and facial expressions, keep joints connected, and control playback by frame in Remotion or validate browser previews with HyperFrames.
Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.
Run score Not tested
See how to installAnimate characters assembled from SVG parts using GSAP and CSS transforms. Adjust position, scale, and rotation, and combine several parts’ movements on a timeline. This lets you build actions such as moving an arm while tilting the head. The skill also covers checking that joints stay connected, that blinks, gaze, and mouth shapes are readable, and that poses last long enough to communicate emotion.
Use it when you want to animate an SVG character whose parts are separate. Alongside browser playback, it supports playing animation in step with Remotion frames and checking motion in HyperFrames before final output.
The character must be built from SVG parts. In Remotion, keep the GSAP timeline paused and control it from the current frame instead of letting it advance automatically. In HyperFrames, validate through the CLI before final output. The skill uses the MIT license.
This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.
AI checked the SKILL.md for operations that need care and for setup requirements. The score comes only from actually running the skill (hands-on test).
Not counted in the score. Rated by AI (OpenAI Codex) as of Oct 23, 2026. Treat it as a guide and read the original before installing.
Review the instructions the agent will receive before you install.
Use this skill when animating character rigs made from SVG parts.
x, y, scale, rotation) rather than layout.svgOrigin or correctly scoped
transform origins).requestAnimationFrame; drive a
paused timeline from the current frame.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 }, "<");
const frame = useCurrentFrame();
const progress = frame / durationInFrames;
timeline.progress(progress);
Use HTML/SVG/GSAP components with deterministic timelines and validate via the HyperFrames CLI before final render.
useCurrentFrame:
https://www.remotion.dev/docs/use-current-frameNo reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Create 3D objects from text or images, choose catalog assets for repeated scenery, and inspect the results in Blender. The workflow checks geometry, materials, scale, and ground contact while recording asset sources and generation costs.
Generate background music and songs with lyrics using ACE-Step 1.5, with controls for duration, tempo, and musical key. You can also restyle reference audio and separate vocals or individual instruments from mixed tracks.
Build voice assistants and conversational characters with ElevenLabs. Configure voices, language models, and external tools, then connect conversations to a website widget or use Twilio integration for outbound phone calls.
Generate video clips from text descriptions or reference images through multiple API services. Compare available providers by cost and task needs, choose aspect ratios, track generation progress, and refine existing clips through conversational editing with Gemini Omni.
Create AI video clips from text or reference images, choosing among providers to match the task and budget. Supports vertical social videos, product photo animation, and conversational editing of existing clips with Gemini Omni Flash.
Generate and edit images and videos through Atlas Cloud using one API key across multiple model families. Choose supported models for each task, download the results, and retain details about the model, inputs, and estimated cost.