Animations run on the transition between one slide and the next. Each is named
A.{Type}.{name} and attached to an element in the slide it arrives on.
Every figure below is a two-slide deck. Step it with the controls under the canvas, or with the arrow keys once the canvas has focus, and press r to run it again.
slides: [
{ text: "Two points.", visible: ["A", "B"] },
{ text: "Join AB.", visible: ["A", "B", "AB"],
transition: { animations: [ { elem: "AB", name: geomlib.A.Line.straightEdgeConnect } ] } },
]
An element a later slide introduces must be listed in initiallyHidden, or it
is on screen before the slide that draws it. mode on the transition sequences
several animations: "parallel" runs them together, "cascade" one after the
next.
Applies to — point
Arguments — —
Default rate — 350 ms
Marker radius scales from zero to its final size.
transition: { animations: [ { elem: "X", name: geomlib.A.Point.appear } ] }The plainest reveal. Used for a point the proof introduces at a crossing.
Applies to — lineSlider
Arguments — { to: number } or { to: "E" }
Default rate — 650 ms
Glides a slider point along its line, its dependents following each frame.
transition: { animations: [ { elem: "P", name: geomlib.A.Point.slide, args: { to: 0.85 } } ] }The scripted counterpart of a reader dragging the slider. A numeric target is the parameter t along AB; naming an element instead projects that element onto the line, so the point can land on a derived point and keep tracking it.
Applies to — point
Arguments — { via: [...] }, { along: "AB" }, { arc: {...} }, { settle }
Default rate — 1200 ms
Moves a point along a path so the figure visibly reacts as it travels.
transition: { animations: [ { elem: "P", name: geomlib.A.Point.followPath, args: { along: "AB" } } ] }Where Point.slide sets a slider to a value, this one is watched. The path starts at the point's current position. With settle false it retraces its steps and finishes exactly where it began, so a deck can show a construction breaking and then restore it.
Applies to — line
Arguments — —
Default rate — 0.25 px/ms
A pencil stroke from A toward B.
transition: { animations: [ { elem: "AB", name: geomlib.A.Line.straightEdgeConnect } ] }The canonical straightedge between two points that already exist. Short lines are held to a minimum duration so they stay perceptible.
Applies to — line
Arguments — —
Default rate — 0.25 px/ms
The same trace, for a line produced beyond an existing endpoint.
transition: { animations: [ { elem: "AE", name: geomlib.A.Line.straightEdgeExtend } ] }For Line.extend constructions, where one endpoint sits on an existing line and the other is the projected new end.
Applies to — circle
Arguments — { startAngle?: number }
Default rate — 0.003 rad/ms
Two steps: the edge sweeps a full turn, then the face fades in over it.
transition: { animations: [ { elem: "circ", name: geomlib.A.Circle.compass } ] }The sweep begins where a real compass would, at the radius-defining point. A circle with no faceColor skips the second step entirely rather than waiting through it.
Applies to — circle
Arguments — { side?: 1 | -1, keepCircles?: string[] }
Default rate — 0.0055 rad/ms
Euclid I.2 — copying a length to a point — as a single entry.
transition: { animations: [ { elem: "cop", name: geomlib.A.Circle.compassTransfer } ] }Declared as circle;radius;P,C,D: centre P, radius the length |CD| being copied. The macro walks the rigorous I.2 construction as transient gold scaffolding, then reveals the circle and clears it. keepCircles names the construction circles that should survive as real, addressable elements for a later slide.
Applies to — polygon
Arguments — —
Default rate — 0.25 px/ms, min 180 ms
Traces each edge in vertex order.
transition: { animations: [ { elem: "t", name: geomlib.A.Polygon.outline } ] }One 0 to 1 step is partitioned across the edges, so each is drawn in sequence at its own proportion of the whole.
Applies to — polygon
Arguments — —
Default rate — outline 0.25 px/ms, fill cap 500 ms
The outline trace, then a face fade-in over it.
transition: { animations: [ { elem: "t", name: geomlib.A.Polygon.outlineAndFill } ] }The fill is deliberately quicker than the outline: the eye has taken the shape in from the trace already, so the colour should land promptly. A face-less polygon skips it.
Applies to — polygon
Arguments — { onto: string }
Default rate — translate 0.25 px/ms, hold 800 ms
Euclid's superposition, as in I.4.
transition: { animations: [ { elem: "t1", name: geomlib.A.Polygon.superpose, args: { onto: "t2" } } ] }A gold ghost copy lifts off, translates so its first vertex meets the target's, rotates to lay one side onto the other, holds a beat coinciding, then retraces its way home. The real polygon never moves. The target must have the same vertex count.
Applies to — polygon
Arguments — —
Default rate — 0.0045 rad/ms, fill cap 500 ms
Euclid I.1 as a single entry.
transition: { animations: [ { elem: "t", name: geomlib.A.Polygon.equilateralBuild } ] }Two gold compass circles sweep out, the triangle outlines and fills, and the circles clear as it lands. The apex follows whichever side the declared triangle chose, so A,B and B,A give mirror results.
Applies to — sector
Arguments — —
Default rate — 0.003 rad/ms, min 250 ms
The arc grows from one arm toward the other.
transition: { animations: [ { elem: "m", name: geomlib.A.Sector.sweep } ] }The angle-marker reveal. A sector with a face sweeps and then fills; one without skips the fill. A sector with no colours at all renders in the gold emphasis stroke while animating, which is the invisible angle-marker pattern.
Applies to — any
Arguments — { include?, vary?, dx?, dy?, autoPlace?, variants? }
Default rate — 0.4 px/ms, min 200 ms
Clones part of the figure into displaced copies that slide aside and stay for the slide.
transition: { animations: [ { elem: "t", name: geomlib.A.Group.cloneAside, args: { include: "all", dx: 130, dy: 0 } } ] }The real figure never moves. vary can set a slider before the snapshot is taken, so a copy shows a different case — which is how a trichotomy argument gets all three cases on screen at once. autoPlace centres the figure first and lays the copies in the freed space.
Applies to — any
Arguments — —
Default rate — 0 ms
A no-op finalise: the element arrives with no motion.
transition: { animations: [ { elem: "CD", name: geomlib.A.instant } ] }Used on a slide entry to suppress an animation that would otherwise be inherited, and fired automatically when a name lookup fails, with one console warning per name. Below, AB is drawn and CD simply appears.
The full animation table — including the reserved names not yet implemented,
and the animationConfig tuning fields — is in the library's own documentation,
listed at the foot of the geomlib page.