Gum Tool Animations
SkillDev toolsHow the Gum tool authors state-based animations, StateAnimationPlugin, Animations tab, .ganx sidecars. Triggers: Animations tab, StateAnimationPlugin, ElementAnimationsSave, AnimationSave, AnimatedStateSave, .ganx, named events.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Gum Tool Animations skill
What this skill tells your AI
The instructions your AI receives, as published by vchelaru/gum in .claude/skills/gum-tool-animations/SKILL.md and read by ahel’s review.
State-based animation authoring in the editor: timeline animations that interpolate between named States over time. NOT the same as runtime AnimationChains (see Landmines).
Where it lives
- Split like the editor tab (phase 80 of the Avalonia migration): the neutral
Tool/StateAnimationPlugin.Core(net10.0) holdsStateAnimationPluginBase(all event wiring, menu, tab, undo, delete option), the load/save and settings managers, the shared list hotkeys (AnimationTabKeyHandler), and the timeline math (Timeline/TimelineLayout,InterpolationCurve). Each head derives the exported plugin: WPFMainStateAnimationPlugin(Gum/StateAnimationPlugin/, viewsViews/MainWindow.xaml,Timeline.xaml,StateView.xaml) and AvaloniaAvaloniaStateAnimationPlugin(Tool/Gum.Avalonia/Plugins/StateAnimation/, whoseTimelineViewdraws natively inRender). A behavior change to the tab belongs in the core, not in either view. Tab is hidden until View ▸ View Animations. - VMs (in Gum.Presentation):
ElementAnimationsViewModel→AnimationViewModel→AnimatedKeyframeViewModel; the business logic isAnimationTabController.
Data model & serialization
- Persisted as a per-element
.ganxsidecar:<ElementName>Animations.ganxnext to the element's.gucx/.gusx(path:Managers/AnimationFilePathService.cs). NOT embedded in the element file or.gumx. Load/save:Managers/AnimationCollectionViewModelManager.cs. - Save classes live in
GumDataTypes/SaveClasses/*, namespaceGum.StateAnimation.SaveClasses.ElementAnimationsSave→List<AnimationSave>; eachAnimationSaveholds three parallel keyframe lists: state keyframes, sub-animation refs, named events. - A state keyframe binds to a state by name string,
"Category/State"convention (uncategorized = no slash). Resolution:AnimationViewModel.GetStateFromCategorizedName. - Keyframes are cumulative — each combines with prior ones; preview rebuilds via
RefreshCumulativeStates.
Named events — FRB-only
"Add Named Event" authors a NamedEventSave (name + time). It round-trips to .ganx, but
Gum's own runtime never dispatches it — only FlatRedBall consumes named events. Skip in
non-FRB docs.
Runtime relationship (do NOT conflate)
- State animations (this skill) —
.ganx, interpolate between states. Runtime driver:GumCommon/Runtime/AnimationController.cs+AnimationRuntime.cs(undocumented elsewhere). - AnimationChains —
.achx, sprite-sheet flipbook on Sprite/NineSlice; see [[gum-runtime-animation-chains]]. Different concept, different file, different runtime.
Landmines
- "Keyframe" is a union of 3 things.
AnimatedKeyframeViewModelis a state keyframe OR sub-animation ref OR named event, discriminated by which string is non-empty (StateName → state, else AnimationName → sub-anim, else event). No type enum; fans out into 3 lists on save. - Misleading names on
AnimationSave.States= state keyframes (not element states);Animations= sub-animation keyframes (not child animations). - Interpolation types come from a NuGet package, not Gum.
InterpolationType/Easing(state keyframes only) areFlatRedBall.Glue.StateInterpolationtypes from the standaloneFlatRedBall.InterpolationCorepackage — an easing/tweening library under the FlatRedBall brand, NOT the FRB engine. The animation data model serializes these into.ganx. - Sidecar must follow the element. Element rename/duplicate/delete must move the
.ganx; wired via RenameManager/DuplicateService/ElementDeleteService inAssignEvents. - Save is whitelist-filtered.
HandleDataChangeonly re-saves on specific property changes; a new persisted keyframe field won't save unless added there.
Docs
User-facing content today is a 4-part tutorial under
docs/gum-tool/tutorials-and-examples/animation-tutorials/. Issue #480 wants a reference
section on the Animations tab itself (data model, named events, the tab UI), not tutorial-style.
Signals
- GitHub stars
- 620
- Forks
- 80
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
gum-tool-animations- Source
- github.com/vchelaru/gum