animation studio

An animation node is a short, looping piece of motion graphics drawn live. You stack layers, key their properties over time, and expose parameters that other nodes can drive. There is nothing to render: the card plays it in place.

add one and open the studio

Add it from the dock: Animation. The card shows its size and length (for example 1280×720 · 5s), a layer and parameter count, whether it loops or plays once, and a live preview beside it with a play button and a scrubber. Open studio, or the expand icon, opens the full-window studio.

The studio has the layers on the left, the stage in the centre, properties on the right (Layer and Composition tabs) and a keyframe timeline along the bottom. Edits show on the card and in anything using the animation as you work. <kbd>Space</kbd> plays and pauses, <kbd>⌘</kbd> <kbd>Z</kbd> undoes, <kbd>⌫</kbd> deletes the layer, <kbd>Esc</kbd> closes.

layers

Add layer in the ribbon adds seven kinds: Rectangle, Ellipse, Gradient, Image, Text, Line and Group. Layers draw bottom to top, and a group offsets its children. Click a layer on the stage to pick it; drag to move it. Once a property is keyed, dragging writes a key at the playhead.

Every layer has position, size, rotation and opacity. Each type adds its own: fill, corner radius and stroke on a rectangle; a feather for a soft puff on an ellipse; linear or radial colour stops on a gradient; font, weight, alignment and line height on text.

A layer can also have a drop shadow (colour, blur, offset and opacity) and, in the Repeat section, be drawn once per copy: set a count, and each copy knows its index.

keyframes

Click the diamond next to any property to key its value at the playhead. A filled diamond means a key sits here. Alt-click stops animating the property. Numbers ease between keys; colours blend in linear light, so red to green does not go muddy. Text and other strings hold their value until the next key.

In the timeline every keyed property gets a row. Drag a key to retime it, double-click to delete it, and shift-click to cycle its easing: smooth, linear, ease in, ease out and step.

expressions

The fx button switches a property from a value to an expression. Inside it, $t is seconds, $p is progress from 0 to 1, $i is the copy index, $<name> is a parameter, and $<field> is a field of the current repeat item. Functions include min, max, abs, sqrt, floor, sin, cos (degrees), clamp, mod, lerp, hash and pow.

This is how a gallery wall of thirteen pictures slides in a loop: one keyed parameter, and an expression on each picture's x. You retime one curve, and the layout follows.

parameters

The Parameters panel lists named values: number, colour, text or yes/no. Give a parameter keys to animate it, and link any layer property to it with the plug icon.

Click a parameter's plug to expose it as an input. The card grows a handle for it, and you can wire a note, a number or a colour node into it. A wired value beats the parameter's own keys. A title card whose text, colour and speed come from other nodes is one animation.

draw an svg with a pen

On an Image layer whose source is an SVG, set draw from 0 to 1 and the picture draws itself stroke by stroke, as if by a pen. Key draw over time and the line art draws on. Options: drawOrder (document order, or nearest stroke next), ink (one colour for every stroke), strokeScale and fills (show fills once reached, always, or not at all).

reveal through a map

Any layer except a line has a reveal property from 0 to 1: it shows only where its map has arrived. revealMap can be noise (the default), fibres, radial, linear, or a picture, where dark areas arrive first. revealSoft softens the front, and revealEdge tints it. With a picture map, revealGrain makes the front follow the weave, like dye wicking along threads.

use it elsewhere

An animation has no output port of its own; other nodes use it where it sits.

• In the video editor, animations appear in the bin and play as clips on the timeline.
• On a 3D model, an animation can be a live texture. The surface moves as the animation plays.

limits & good to know

limit	value
stage	16–4096 px a side (new animations are 1280 × 720)
length	0.1–600 s (new: 5 s)
frame rate	1–60 fps (new: 30)
layers	2,000

• Stage size, frame rate, length, background and loop are in the Composition tab.
• The 1280 × 720, 1920 × 1080, 1080 × 1080 and 1080 × 1920 presets are in the stage size menu.

related

• video editor
• look and share
• image composer — for stills