Skip to content

Animation Reference

Jump to bottom
idadwind edited this page Sep 21, 2026 · 1 revision

All animations and events

On this page

This reference covers all 54 currently supported event types, including camera, space and composition events. Every example is an independent event to place in a document's events array. Do not paste them all together at start zero: overlapping writers can conflict. Add start values or use Succession to sequence them.

Example scene setup

Use these spaces and parameters with the event examples below. Replace the empty events array with one example at a time. The parameter a is provided for AnimateParameter; bind it to a geometry expression when building your scene.

{
  "version": 1,
  "parameters": {
    "a": 1
  },
  "spaces": [
    {
      "name": "s",
      "type": "plane2d",
      "objects": [
        {
          "id": "shape",
          "type": "Square",
          "size": 2
        },
        {
          "id": "target",
          "type": "Circle",
          "radius": 1,
          "position": [
            3,
            0
          ]
        },
        {
          "id": "third",
          "type": "Triangle",
          "position": [
            -3,
            0
          ]
        },
        {
          "id": "arrow",
          "type": "Arrow",
          "from": [
            -2,
            0
          ],
          "to": [
            2,
            0
          ]
        },
        {
          "id": "path",
          "type": "Circle",
          "radius": 2
        },
        {
          "id": "text",
          "type": "Text",
          "text": "Hello mathematical world",
          "position": [
            0,
            2
          ]
        },
        {
          "id": "first",
          "type": "Square",
          "size": 0.5
        },
        {
          "id": "second",
          "type": "Circle",
          "radius": 0.5,
          "position": [
            1,
            0
          ]
        },
        {
          "id": "group",
          "type": "Group",
          "children": [
            "s.first",
            "s.second"
          ]
        }
      ]
    },
    {
      "name": "solid",
      "type": "space3d",
      "objects": [
        {
          "id": "cube",
          "type": "Cube"
        }
      ]
    }
  ],
  "events": []
}

Shared timing and restrictions

  • Times are seconds. Ordinary events default to duration one and start zero; Add and SwitchSpace default to duration zero. Examples specify duration explicitly.
  • Object, parameter, camera and space-transform events accept built-in easing names, such as linear, smooth and sine-in-out. SwitchSpace and composition objects do not accept easing; set easing on their children.
  • Transform, ReplacementTransform and TransformFromCopy require compatible continuous vector paths in the same space; they do not morph arbitrary text, meshes or disconnected contours.
  • Homotopy, ComplexHomotopy, ApplyPointwiseFunction and PhaseFlow target supported points/continuous paths, not arbitrary groups, labels, meshes or disconnected contours. Mapping parameters are frozen at event start; geometry uses local Cartesian coordinates.
  • Flash, FocusOn and Circumscribe use noninteractive overlays in plane2d and leave the source state intact. They target individual drawables.
  • GrowFromPoint, GrowFromEdge and SpinInFromNothing target individual drawables; group and label restrictions apply.
  • Restore is a deterministic historical snapshot, not a mutable save-state stack.

Add

Show the target immediately.

{
  "type": "Add",
  "object": "s.shape",
  "duration": 0
}

Create

Reveal the path progressively.

{
  "type": "Create",
  "object": "s.shape",
  "duration": 2
}

Uncreate

Erase the path and hide it at completion.

{
  "type": "Uncreate",
  "object": "s.shape",
  "duration": 2
}

FadeIn

Fade in; the target is hidden before its first entrance.

{
  "type": "FadeIn",
  "object": "s.shape",
  "duration": 2
}

FadeOut

Fade out and hide the target.

{
  "type": "FadeOut",
  "object": "s.shape",
  "duration": 2
}

MoveTo

Move the object center to native coordinates; optional from specifies the starting center.

{
  "type": "MoveTo",
  "object": "s.shape",
  "to": [
    2,
    1
  ],
  "duration": 2
}

Shift

Translate by a native-coordinate displacement.

{
  "type": "Shift",
  "object": "s.shape",
  "by": [
    2,
    0
  ],
  "duration": 2
}

Rotate

Rotate around the object center; optional axis is a Cartesian 3-vector, defaulting to z.

{
  "type": "Rotate",
  "object": "s.shape",
  "angle": 1.5707963267948966,
  "duration": 2
}

Scale

Scale about the object center; factor must be positive.

{
  "type": "Scale",
  "object": "s.shape",
  "factor": 1.5,
  "duration": 2
}

FadeToColor

Interpolate to a six-digit hex color.

{
  "type": "FadeToColor",
  "object": "s.shape",
  "color": "#ff8800",
  "duration": 2
}

ApplyMatrix

Apply a square matrix matching the native coordinate dimension.

{
  "type": "ApplyMatrix",
  "object": "s.shape",
  "matrix": [
    [
      1,
      0.5
    ],
    [
      0,
      1
    ]
  ],
  "duration": 2
}

MoveAlongPath

Move along a continuous path sampled at event start.

{
  "type": "MoveAlongPath",
  "object": "s.shape",
  "path": "s.path",
  "duration": 2
}

Indicate

Temporarily emphasize color and size, then restore the original appearance.

{
  "type": "Indicate",
  "object": "s.shape",
  "color": "#ffcc00",
  "factor": 1.2,
  "duration": 2
}

Wiggle

Temporarily wiggle the rotation.

{
  "type": "Wiggle",
  "object": "s.shape",
  "angle": 0.2,
  "duration": 2
}

Blink

Temporarily dim opacity repeatedly; count is a positive integer.

{
  "type": "Blink",
  "object": "s.shape",
  "count": 3,
  "duration": 2
}

ApplyWave

Temporarily deform a continuous vector path, restoring it at the end.

{
  "type": "ApplyWave",
  "object": "s.shape",
  "amplitude": 0.3,
  "waves": 2,
  "direction": [
    0,
    1,
    0
  ],
  "duration": 2
}

Flash

Draw temporary radial strokes around a live 2D target. numLines is 2–64; radius and lineLength are positive.

{
  "type": "Flash",
  "object": "s.shape",
  "radius": 0.3,
  "lineLength": 0.3,
  "numLines": 12,
  "color": "#ffcc00",
  "duration": 2
}

FocusOn

Shrink a temporary translucent circle onto a live 2D target.

{
  "type": "FocusOn",
  "object": "s.shape",
  "radius": 3,
  "color": "#ffcc00",
  "duration": 2
}

Circumscribe

Draw and fade a temporary rectangle around a 2D target. Padding is nonnegative; measured text bounds and groups are unsupported.

{
  "type": "Circumscribe",
  "object": "s.shape",
  "padding": 0.15,
  "color": "#ffcc00",
  "duration": 2
}

GrowFromCenter

Grow into view from the target center.

{
  "type": "GrowFromCenter",
  "object": "s.shape",
  "duration": 2
}

GrowArrow

Grow an arrow shaft and its attached arrowheads. Use an Arrow, DoubleArrow, CurvedArrow or CurvedDoubleArrow.

{
  "type": "GrowArrow",
  "object": "s.arrow",
  "duration": 2
}

GrowFromPoint

Grow from a numeric native point; for grouped objects this point is in parent coordinates.

{
  "type": "GrowFromPoint",
  "object": "s.shape",
  "point": [
    -2,
    0
  ],
  "duration": 2
}

GrowFromEdge

Grow from left, right, top, bottom, front or back as permitted by the space dimension. Requires geometric bounds.

{
  "type": "GrowFromEdge",
  "object": "s.shape",
  "edge": "left",
  "duration": 2
}

SpinInFromNothing

Grow while unwinding the specified rotation. The default angle is one full turn.

{
  "type": "SpinInFromNothing",
  "object": "s.shape",
  "angle": 6.283185307179586,
  "duration": 2
}

DrawBorderThenFill

Draw the border in the first half, then fill the interior. Supports paths and groups containing only paths.

{
  "type": "DrawBorderThenFill",
  "object": "s.shape",
  "duration": 2
}

ShowPassingFlash

Move a stroke window along a continuous path, then hide the target. timeWidth is greater than zero and at most one. Author a separate copy if the original should remain visible.

{
  "type": "ShowPassingFlash",
  "object": "s.shape",
  "timeWidth": 0.2,
  "duration": 2
}

Transform

Morph the source into the destination path geometry while retaining the source identity. The destination is a separately authored object.

{
  "type": "Transform",
  "object": "s.shape",
  "to": "s.target",
  "duration": 2
}

ReplacementTransform

Morph the source, then transfer visibility to the destination.

{
  "type": "ReplacementTransform",
  "object": "s.shape",
  "to": "s.target",
  "duration": 2
}

TransformFromCopy

Morph a temporary copy, preserving the source and revealing the destination at completion. Snapshot geometry is taken at event start.

{
  "type": "TransformFromCopy",
  "object": "s.shape",
  "to": "s.target",
  "duration": 2
}

FadeTransform

Crossfade source into destination without geometric or glyph matching.

{
  "type": "FadeTransform",
  "object": "s.shape",
  "to": "s.target",
  "duration": 2
}

Swap

Exchange centers of two drawable siblings in one space.

{
  "type": "Swap",
  "object": "s.shape",
  "to": "s.target",
  "duration": 2
}

CyclicReplace

Cycle the centers of 2–128 distinct drawable siblings; the last moves to the first center.

{
  "type": "CyclicReplace",
  "objects": [
    "s.shape",
    "s.target",
    "s.third"
  ],
  "duration": 2
}

Restore

Restore an explicit historical snapshot; at must not exceed event start. Use after earlier changes. Default at is zero.

{
  "type": "Restore",
  "object": "s.shape",
  "at": 0,
  "start": 3,
  "duration": 2
}

Homotopy

Map local Cartesian points using progress alpha from zero to one. Use an identity map at alpha zero to avoid an initial jump.

{
  "type": "Homotopy",
  "object": "s.shape",
  "expressions": [
    "x",
    "y + alpha * sin(x)"
  ],
  "duration": 2
}

ComplexHomotopy

Map continuous 2D geometry with a safe complex expression using z and alpha.

{
  "type": "ComplexHomotopy",
  "object": "s.shape",
  "expression": "z + alpha * 0.3 * sin(z)",
  "duration": 2
}

ApplyPointwiseFunction

Interpolate points from their initial positions to a safe Cartesian mapping.

{
  "type": "ApplyPointwiseFunction",
  "object": "s.shape",
  "expressions": [
    "x",
    "y + 0.2*x*x"
  ],
  "duration": 2
}

PhaseFlow

Integrate a vector field using fixed-step RK4. steps is capped at 512; virtualTime defaults to event duration and may be negative.

{
  "type": "PhaseFlow",
  "object": "s.shape",
  "expressions": [
    "-y",
    "x"
  ],
  "virtualTime": 3.14,
  "steps": 128,
  "duration": 2
}

AddTextLetterByLetter

Reveal plain Text by Unicode grapheme clusters; this is not glyph-stroke drawing.

{
  "type": "AddTextLetterByLetter",
  "object": "s.text",
  "duration": 2
}

RemoveTextLetterByLetter

Remove plain Text by grapheme clusters.

{
  "type": "RemoveTextLetterByLetter",
  "object": "s.text",
  "duration": 2
}

AddTextWordByWord

Reveal plain Text by words.

{
  "type": "AddTextWordByWord",
  "object": "s.text",
  "duration": 2
}

ShowIncreasingSubsets

Reveal Group children in order, accumulating the visible subset.

{
  "type": "ShowIncreasingSubsets",
  "object": "s.group",
  "duration": 2
}

ShowSubmobjectsOneByOne

Show one Group child at a time; only the final child remains visible at completion.

{
  "type": "ShowSubmobjectsOneByOne",
  "object": "s.group",
  "duration": 2
}

AnimateParameter

Animate a declared numeric parameter. Reference a in geometry expressions to see the change; from is optional.

{
  "type": "AnimateParameter",
  "parameter": "a",
  "from": 1,
  "to": 2,
  "duration": 2
}

ApplySpaceMatrix

Transform the entire space, including its grid and geometry.

{
  "type": "ApplySpaceMatrix",
  "space": "s",
  "matrix": [
    [
      1,
      0.5
    ],
    [
      0,
      1
    ]
  ],
  "duration": 2
}

ApplyComplexFunction

Apply a nonlinear complex mapping to a 2D space using z; supported functions use principal branches where applicable.

{
  "type": "ApplyComplexFunction",
  "space": "s",
  "expression": "z^2 / 3",
  "duration": 2
}

SwitchSpace

Change the active view using cut or fade. Other spaces continue sharing the global clock. A cut can use duration zero.

{
  "type": "SwitchSpace",
  "space": "solid",
  "transition": "fade",
  "duration": 2
}

CameraMove

Move a 3D camera and optionally its look-at center. Paths crossing the center are rejected.

{
  "type": "CameraMove",
  "space": "solid",
  "position": [
    7,
    -5,
    3
  ],
  "center": [
    0,
    0,
    0
  ],
  "duration": 2
}

CameraOrbit

Orbit a 3D camera about its center. The default axis is z.

{
  "type": "CameraOrbit",
  "space": "solid",
  "angle": 3.14,
  "axis": [
    0,
    0,
    1
  ],
  "duration": 2
}

CameraZoom

Animate a positive camera zoom factor.

{
  "type": "CameraZoom",
  "space": "s",
  "factor": 1.5,
  "duration": 2
}

CameraWindow

Fit a coordinate window; supply increasing bounds. A number-line window only needs x.

{
  "type": "CameraWindow",
  "space": "s",
  "x": [
    -4,
    4
  ],
  "y": [
    -3,
    3
  ],
  "duration": 2
}

EventGroup

Run children together. Child start values are local offsets; outer duration rescales the composition.

{
  "type": "EventGroup",
  "events": [
    {
      "type": "Shift",
      "object": "s.shape",
      "by": [
        1,
        0
      ]
    },
    {
      "type": "FadeToColor",
      "object": "s.shape",
      "color": "#ff8800"
    }
  ],
  "duration": 2
}

Succession

Run children one after another, including any local start offsets.

{
  "type": "Succession",
  "events": [
    {
      "type": "Create",
      "object": "s.shape"
    },
    {
      "type": "Shift",
      "object": "s.shape",
      "by": [
        1,
        0
      ]
    }
  ],
  "duration": 2
}

LaggedStart

Stagger child starts by lagRatio times the preceding child duration.

{
  "type": "LaggedStart",
  "lagRatio": 0.3,
  "events": [
    {
      "type": "Create",
      "object": "s.shape"
    },
    {
      "type": "Create",
      "object": "s.target"
    }
  ],
  "duration": 2
}

LaggedStartMap

Expand an object-event template over qualified targets with staggered starts. The template omits object.

{
  "type": "LaggedStartMap",
  "objects": [
    "s.shape",
    "s.target"
  ],
  "animation": {
    "type": "Shift",
    "by": [
      0,
      1
    ],
    "duration": 1
  },
  "lagRatio": 0.3,
  "duration": 2
}

Wiki home · Quick start

Webnim repository · Wiki home · Report an issue

Webnim

Home

Clone this wiki locally