UI Animations

Every User Interface file can hold any number of keyframe animations. A timeline docked under the preview lets you key almost any element property over time, and the script canvas plays, stops and reacts to those animations.

Overview

An animation belongs to the User Interface file it was created in. It is a list of tracks, each targeting one property of one element, and each track is a list of keyframes at points in time. Between two keyframes the value is interpolated, and the easing on a keyframe decides the shape of that interpolation.

What animations are good for:

• A menu that slides and fades in when it appears
• A button that pulses to draw attention
• A health bar that eases to its new value instead of snapping
• A panel that shakes when an action is refused
• A dialogue box that pops in when a line arrives and out when it ends

The Animations Panel

In the Designer, the Animations panel sits directly under the preview, in the same column. Like every panel in the editor it can be resized, moved or detached (see Workspace & Layout).

The panel has two halves:

• Animation list (left): Every animation in this file, with a New button and a Search animations... box
• Timeline (right): The selected animation's tracks, its ruler and its transport bar. With no animation selected it reads "Select an animation to edit its timeline"

Transport bar:

• Play / Pause: Runs the animation in the preview. Disabled until the animation has at least one keyframe
• Loop: Repeat playback rather than stopping at the end
• Snap: Snaps keyframe drags and the playhead to ruler ticks and to other keyframes. Hold Alt to bypass it for one drag
• Playhead / length readout: The current time and the animation's length, in seconds. The length is set by dragging the red end line on the ruler, not by typing
• Fit: Fits the whole animation in view and resets the zoom

Creating an Animation

Click New in the animation list. A fresh animation appears with a generated name, selected and ready to key.

• Rename: Double-click the row, or right-click it and choose Rename
• Duplicate and Delete: also on the row's right-click menu
• Reorder: Drag rows in the list
• Find one: Type in the Search animations... box

Animations also appear in the Script mode Variables panel under Animations, where you can drag one onto the canvas and use the same rename and delete actions.

Elements, Tracks & Keyframes

The timeline groups rows by element. Each element gets a header row you can collapse, with its property tracks underneath. Clicking the header's target icon selects that element in the Hierarchy, so it is easy to keep the panel and the Designer in sync.

Any element in the file can be animated. Unlike the script graph, animations do not require you to tick Is Variable first, because a track targets an element directly.

Adding a Track

1. Click Add track in the top-left corner of the timeline and pick an element. It lists only elements not already in the timeline, with a Search elements... box
2. The element gets a header row. Click the + on that row to choose a property, with its own Search properties... box
3. The property picker lists only properties that actually apply to that element type, in the same order the rows appear in Element Settings

You can also skip all of this and use the auto-key diamonds instead, which create the element row, the track and the first keyframe in one click.

Auto-Key Diamonds

Every animatable row in Element Settings grows a small diamond next to its reset button while an animation is selected. It is the fastest way to key something, because you are already looking at the value you want to change.

• Dimmed: No animation is selected. Select or create one first
• Hollow: There is no keyframe at the playhead. Clicking adds one holding the row's current value, creating the track if this is the first key
• Filled: There is a keyframe at the playhead. Clicking removes it
• Padlock: The track is locked in the timeline. Clicking unlocks it

Live Values & Scrubbing

While an animation is selected, the sampled value at the playhead reads back into Element Settings, so scrubbing the timeline shows exactly what the interface looks like at that moment.

Each track row in the timeline also ends with its live value, and editing it sets the value at the playhead. Numeric rows scrub: drag sideways to change the number, or click to type one. Hold Shift while dragging for larger steps and Alt for finer ones. Color rows show a swatch that opens the color picker, boolean rows a checkbox and enum rows a dropdown. An image row shows the file name and is edited by double-clicking the keyframe. A locked track shows its value read-only.

What You Can Animate

The animation vocabulary is derived from the same property catalog as the script canvas's Set and Get nodes, keeping the properties whose values can be sampled over time. Roughly, that is:

• Layout: Position X and Y, Width and Height
• Rendering: Opacity, Rotation, Scale X and Y
• Appearance: Background Color, Background Opacity, Background Image, Border Color, per-side Border Width, per-corner Border Radius, per-side Padding and Margin, Max Width
• Text: Text Color, Font Size, Line Height, Text Align, Bold, Italic, Underline, Text Transform, plus outline and drop shadow width, offset, blur and color
• Image: Image Source, Fit, Object Position, Tint Color and Tint Opacity
• Containers: Gap, Justify, Align, Grid Columns, Scroll Orientation and Scroll Visibility
• Controls: checkbox Box and Check Mark parts, slider and progress Track, Fill and Thumb parts, Slider Value, Checked, Active Index and the dropdown arrow
• Behavior: Visibility

Some properties are deliberately left out. The per-state colors (hover, pressed, disabled and focused) stay script-only, because animating them would fight the runtime's own state repainting. So do the uniform and per-axis spacing and transform values, since their per-side and per-axis twins are what the timeline targets. Behavior and configuration properties stay script-only too: Z Order, Cursor, Is Enabled, Is Draggable, Drag Tags and the Min, Max and Step of a slider or progress bar. Text-valued properties like Text, Tooltip Text and Font Family have nothing to interpolate, so they are not offered either. The per-state colors (hover, pressed, disabled and focused) stay script-only, because animating them would fight the runtime's own state repainting. So do the uniform and per-axis spacing and transform values, since their per-side and per-axis twins are what the timeline targets.

Paired and Per-Side Properties

Seven properties come as sets, and the timeline shows each set under one expandable parent row instead of scattering its members:

• Position and Size and Scale: X and Y
• Padding and Margin and Border Width: Left, Top, Right and Bottom
• Border Radius: Top Left, Top Right, Bottom Left and Bottom Right

The parent row shows one aggregate keyframe marker per point in time where any member has a key, so you can drag or delete a whole set at once. Expand it to work on an individual axis, side or corner. Adding one of these from the property picker adds the group.

Stepped Properties

Not every animatable value can be blended. Enums, booleans, image sources and Active Index step instead: the value holds from its keyframe until the next one, then jumps. Visibility, Bold, Text Align, Fit and Image Source all behave this way, which is exactly what you want for swapping an image mid-animation or hiding an element at a precise moment.

Easing

Right-click a keyframe and open the Easing submenu, or double-click it and use the easing dropdown in the small editor that appears. The menu offers eight curves in two groups, each drawn as a small sparkline of the curve itself so you can see what it does before choosing:

Constant is the hold: the value stays put until the next keyframe, then jumps. Back out, Bounce out and Elastic out overshoot or wobble past the target before settling, which is what gives a menu or a badge some personality.

The keyframe's shape on the timeline tells you its easing at a glance:

• Square: Constant
• Triangle: Linear
• Circle: Any eased curve

On a grouped parent row, the aggregate marker takes the members' shared shape when they agree and a neutral circle when they differ.

Stepped properties have no easing to choose. They always hold until the next keyframe, so the submenu is not offered and the keyframe editor reads "Constant (held)".

Working in the Timeline

Navigating:

• Scrub: Click or drag on the ruler to move the playhead. Hold Alt to ignore snapping
• Zoom: Ctrl + mouse wheel over the timeline, centred on the cursor
• Pan: Shift + mouse wheel
• Scroll the rows: Plain mouse wheel
• Fit: The Fit button in the transport bar brings you back if you pan or zoom away entirely
• Resize the name column: Drag the divider between the names and the lanes

Adding and editing keyframes:

• Add one: Double-click an empty spot in a track's lane, or use the lane's right-click menu
• Edit one: Double-click a keyframe to open a small editor with its value, its easing and a Delete button
• Retime one: Drag it along its lane. Hold Alt to bypass snapping

Selecting and moving keyframes:

• Marquee select: Drag a box across the lanes to select every keyframe inside it, across tracks. Hold Shift to add to the current selection
• Toggle one: Ctrl + click (Cmd + click on macOS) a keyframe
• Copy and paste: Right-click a keyframe and choose Copy, then right-click a lane and choose Paste to land it where you clicked. The keyboard paste shortcut pastes at the playhead instead
• Duplicate and delete: Both are on the keyframe's right-click menu, and act on the whole selection when several keyframes are selected

Managing tracks:

• Lock: Each track has a padlock that prevents accidental edits. A locked track's auto-key diamond in Element Settings turns into a padlock too, and clicking it unlocks the track
• Delete: Each track has a delete button, disabled while it is locked. A grouped parent row deletes its whole set and refuses while any member is locked
• Length: Drag the red end line on the ruler to set the animation's length

Playing an Animation from a Script

Animations do nothing on their own. Switch to Script mode and drive them with four nodes, all found in the create-node menu's Animation section. Dragging an animation from the Variables panel onto the canvas places a Get Animation reference, and dropping it straight onto a Play or Stop node wires it into that node's animation pin.

• Play Animation: An execution node with an inline animation picker and five parameters, each of which is a value pin you can wire as well as edit inline:
  • Start At: The time in seconds to start from (0 by default)
  • Loops: How many times to run it (1 by default)
  • Play Mode: Forward, Reverse or Ping Pong
  • Speed: A multiplier on playback speed (1 by default)
  • Restore State: See below
• Stop Animation: An execution node with an animation picker and a Restore State option
• On Animation Finished: An event entry point bound to one animation, picked when you create it, firing when that animation finishes. Chain animations by wiring it into the next Play Animation
• Get Animation: A pure reference pill. Wire its output into the Animation pin of a Play or Stop node instead of picking one inline, so a single reference can feed several nodes. On Animation Finished takes no such wire: it is bound to its animation, and dropping another animation onto it re-binds it

Wire Play Animation to whatever should trigger it. A button's On Click. On Construct, so the interface animates itself in. On Dialogue Tag Reached, so a line of dialogue sets it off.

Restore State

When an animation starts, the editor snapshots every property it is about to touch. Restore State decides whether that snapshot is put back afterwards.

• On Play Animation (off by default): with it on, this playback restores its targets to their pre-play values whenever it tears down, whether that is a Stop node or a natural finish. With it off, the final frame's values stay on the element
• On Stop Animation (off by default): with it on, this stop forces a restore even if the Play did not ask for one. With it off, the playback's own setting still governs, so a Stop only ever adds a restore and never cancels one

Animations Inside Instances

A User Interface file placed inside another brings its own animations with it. Each spawned copy resolves animations from its own file and plays them in its own scope, so two copies of the same interface never fight over playback: an inventory slot can pulse on hover without every other slot pulsing with it.

See Reusable Interfaces from the Graph for spawning instances and reaching into their elements and variables.