skills.rest
vchelaru
vchelaruCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gum-tool-animations

Documents state-based animation authoring in the Gum editor via .ganx sidecar files.

614|78|Updated Mar 11, 2015
Search Tags:#Documentation#Animation#gum#UI editor#flatredball#state keyframes#ganx
One-click install
npx skills add https://github.com/vchelaru/Gum --skill gum-tool-animations
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gum-tool-animations
Source: https://github.com/vchelaru/Gum/tree/main/.claude/skills/gum-tool-animations
Command: npx skills add https://github.com/vchelaru/Gum --skill gum-tool-animations

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers and documenters working with the Gum UI tool lack a clear reference for how the editor's Animations tab works internally, including its StateAnimationPlugin architecture, .ganx sidecar persistence, and the confusing three-way keyframe union model.

Core Features & Use Cases

  • Architecture Mapping: Explains the MEF plugin structure (StateAnimationPlugin), the View/ViewModel hierarchy, and where animation data lives relative to element files.
  • Data Model Reference: Details the ElementAnimationsSave/AnimationSave serialization format, cumulative state keyframes, and the "Category/State" naming convention.
  • Pitfall Documentation: Clarifies that named events are FlatRedBall-only, that InterpolationType comes from the FlatRedBall.InterpolationCore NuGet package, and that state animations differ from runtime AnimationChains.
  • Use Case: When writing documentation or fixing a bug where renaming a Gum element loses its animations, consult this Skill to learn the .ganx sidecar must be moved via RenameManager.

Quick Start

Explain how the Gum editor's Animations tab saves keyframes and why my element's animations disappeared after renaming it.

Frequently Asked Questions about gum-tool-animations

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

FAQPage Schema
How do I create state-based animations in the Gum editor?▼

Enable the Animations tab via View > View Animations, then add state keyframes that interpolate between named element states over time. Animations are saved as a .ganx sidecar file next to the element's .gucx or .gusx file, not embedded in the element itself.

What is the difference between Gum state animations and AnimationChains?▼

State animations interpolate between named element states and are stored in .ganx files, driven at runtime by AnimationController. AnimationChains are sprite-sheet flipbook animations stored in .achx files applied to Sprites or NineSlices. They are separate concepts with different runtimes.

Why did my Gum element lose its animations after renaming?▼

Animations live in a .ganx sidecar file named after the element, so the sidecar must be moved when the element is renamed, duplicated, or deleted. This is wired through RenameManager, DuplicateService, and ElementDeleteService in the plugin's AssignEvents.

Do Gum named animation events work at runtime?▼

Named events authored in the Animations tab round-trip to the .ganx file, but Gum's own runtime never dispatches them. Only FlatRedBall consumes NamedEventSave data, so they should be skipped in non-FlatRedBall documentation.

Where do Gum animation interpolation and easing types come from?▼

InterpolationType and Easing used on state keyframes come from the FlatRedBall.InterpolationCore NuGet package, a standalone easing and tweening library. They are not part of the Gum codebase or the FlatRedBall engine itself.

Related Skills

Explore More Software Engineering Skills→
vchelaruvchelaru
597

gum-tool-copy-paste

Explain Gum's in-memory copy/paste system for UI elements, states, and animations.

Community
Intermediate
vchelaruvchelaru
597

gum-runtime-hot-reload

Watch Gum source file changes and rebuild UI trees at runtime.

Community
Advanced
vchelaruvchelaru
11

animation

Animate FlatRedBall2 sprites with AnimationChain structures and Aseprite loading.

Community
Advanced
ckyeonckyeon

tweens

Animate properties over time in Phaser 4 using tweens and easing functions.

Community
Intermediate