Learn

Guides for authoring motion once and shipping it. New markdown files in the Learn collection publish as articles here.

Draw a stroke on

Make a line appear, disappear, or travel along its path. Open Draw, pick a mode, and animate Start, End, and Offset.
Stop guessing pixel values

Move, rotate, and scale on the canvas. The gizmo writes keys at the playhead, the same as typing in the inspector.
Nest one project inside another

Place another project on the timeline as a composition layer, then drag when it plays. Export combines both into one animation.
Drive motion from the page scroll

Design the motion on the timeline, then export so it plays as the graphic scrolls through the page.
Play the animation on hover

Design the motion on the timeline, then export so it plays when someone hovers the graphic.
Draw the path, export the CSS

Move a layer along a curve you draw on the canvas. Optionally face it along the path, then export.
Offset timing across many layers

Play the same move on many layers, each a little later. Animate one source, link the others, then drag when each copy plays.
Animate once, tile the rest

Repeat one keyed move on the same layer. Cycle restarts the pattern; Offset keeps going from where it left off.
Loop without snapping back

Turn a one-way move into a smooth forward-and-back loop. Enable Pingpong on the property you already animated.
Reuse motion with linked layers

Animate one layer, then link others so they follow the same motion. Link a whole layer or a single property, reverse the move, or shift when it plays.