Animations

Cue, draw, and morph animations — plus the parameter slider for interactive exploration

Animations are placed inside a diagram{} body. They work on a timeline measured in milliseconds. Set autoplay: true on the parent scene to play automatically; otherwise students step through cue points manually.

cue

cue

Fades content in at time in and out at time out. Any diagram primitive or text block can be wrapped in a cue. Wrapping multiple elements in one cue reveals them simultaneously.

in (optional-duration-or-integer; default: —). Time (ms) when content fades in
out (optional-duration-or-integer; default: —). Time (ms) when content fades out
in-duration (duration; default: 500). Length of the fade-in animation
out-duration (duration; default: 500). Length of the fade-out animation
easing (linear / smooth; default: smooth). Animation timing curve

scene{
    Each root is revealed in sequence.
}[
    diagram{
        curve(expression: (x-1)*(x+2); colour: blue)

        cue{
            point(x: 1; y: 0; colour: orange)
            text{ x = 1 }(x: 1.3; y: 0.5; size: 14)
        }(in: 800)

        cue{
            point(x: -2; y: 0; colour: orange)
            text{ x = -2 }(x: -1.6; y: 0.5; size: 14)
        }(in: 1800)
    }(x domain: [-4, 4]; y domain: [-4, 6])
](autoplay: true)

scene{
    Each root is revealed in sequence.
}[
    diagram{
        curve(expression: (x-1)*(x+2); colour: blue)

        cue{
            point(x: 1; y: 0; colour: orange)
            text{ x = 1 }(x: 1.3; y: 0.5; size: 14)
        }(in: 800)

        cue{
            point(x: -2; y: 0; colour: orange)
            text{ x = -2 }(x: -1.6; y: 0.5; size: 14)
        }(in: 1800)
    }(x domain: [-4, 4]; y domain: [-4, 6])
](autoplay: true)

Chalk

Read-only

cue.draw

cue.draw

Progressively draws a diagram element onto the canvas, as if being sketched in real time. Ideal for showing curves, lines, and shapes being constructed step by step.

in (optional-duration-or-integer; default: —). Time (ms) when drawing starts
out (optional-duration-or-integer; default: —). Time (ms) when element is erased
in-duration (duration; default: 750). How long the drawing animation takes
out-duration (duration; default: 750). How long the erase animation takes
easing (linear / smooth; default: smooth). Animation timing curve

diagram{
    cue.draw{
        curve(expression: sin(x); colour: teal)
    }(in: 0; in-duration: 1200)

    cue.draw{
        curve(expression: cos(x); colour: orange; dashed: true)
    }(in: 1200; in-duration: 1200)
}(x domain: [-7, 7]; y domain: [-2, 2])

diagram{
    cue.draw{
        curve(expression: sin(x); colour: teal)
    }(in: 0; in-duration: 1200)

    cue.draw{
        curve(expression: cos(x); colour: orange; dashed: true)
    }(in: 1200; in-duration: 1200)
}(x domain: [-7, 7]; y domain: [-2, 2])

Chalk

Read-only

cue.morph

cue.morph

Smoothly transforms a shape from its initial {} state to its final [] state. Use to show continuity, transformations, or animated transitions between configurations.

at (duration-or-integer; default: 0). Time (ms) when the morph begins
duration (duration; default: 750). Length of the morph animation
easing (linear / smooth; default: smooth). Animation timing curve

diagram{
    cue.morph{
        circle(x: -3; y: 0; size: 1; colour: purple)
    }[
        circle(x: 3; y: 2; size: 2; colour: teal)
    ](at: 500; duration: 900)
}

diagram{
    cue.morph{
        circle(x: -3; y: 0; size: 1; colour: purple)
    }[
        circle(x: 3; y: 2; size: 2; colour: teal)
    ](at: 500; duration: 900)
}

Chalk

Read-only

cue.morph works best when morphing between elements of the same type (e.g. circle → circle, curve → curve). Morphing between different element types may produce unexpected results.

Combining Animations

You can layer cue, cue.draw, and cue.morph blocks inside the same diagram to build up complex step-by-step explanations.

scene{
    The tangent line approaches as $h \to 0$.
}[
    diagram{
        curve(expression: x^2; colour: blue)

        cue.draw{
            segment(x1: 0; y1: 0; x2: 2; y2: 4; colour: pink)
        }(in: 0; in-duration: 800)

        cue{
            point(x: 1; y: 1)
            text{ tangent at x=1 }(x: 1.4; y: 1.2; size: 13)
        }(in: 1000)

        cue.morph{
            segment(x1: 0; y1: 0; x2: 2; y2: 4; colour: pink)
        }[
            segment(x1: -1; y1: -1; x2: 3; y2: 3; colour: green)
        ](at: 1800; duration: 1000)
    }(x domain: [-3, 4]; y domain: [-1, 9])
](autoplay: true)

scene{
    The tangent line approaches as $h \to 0$.
}[
    diagram{
        curve(expression: x^2; colour: blue)

        cue.draw{
            segment(x1: 0; y1: 0; x2: 2; y2: 4; colour: pink)
        }(in: 0; in-duration: 800)

        cue{
            point(x: 1; y: 1)
            text{ tangent at x=1 }(x: 1.4; y: 1.2; size: 13)
        }(in: 1000)

        cue.morph{
            segment(x1: 0; y1: 0; x2: 2; y2: 4; colour: pink)
        }[
            segment(x1: -1; y1: -1; x2: 3; y2: 3; colour: green)
        ](at: 1800; duration: 1000)
    }(x domain: [-3, 4]; y domain: [-1, 9])
](autoplay: true)

Chalk

Read-only

On this page

cue cue.draw cue.morph Combining Animations

Animations

Cue, draw, and morph animations — plus the parameter slider for interactive exploration

cue

cue

Fades content in at time in and out at time out. Any diagram primitive or text block can be wrapped in a cue. Wrapping multiple elements in one cue reveals them simultaneously.

in (optional-duration-or-integer; default: —). Time (ms) when content fades in
out (optional-duration-or-integer; default: —). Time (ms) when content fades out
in-duration (duration; default: 500). Length of the fade-in animation
out-duration (duration; default: 500). Length of the fade-out animation
easing (linear / smooth; default: smooth). Animation timing curve

scene{
    Each root is revealed in sequence.
}[
    diagram{
        curve(expression: (x-1)*(x+2); colour: blue)

        cue{
            point(x: 1; y: 0; colour: orange)
            text{ x = 1 }(x: 1.3; y: 0.5; size: 14)
        }(in: 800)

        cue{
            point(x: -2; y: 0; colour: orange)
            text{ x = -2 }(x: -1.6; y: 0.5; size: 14)
        }(in: 1800)
    }(x domain: [-4, 4]; y domain: [-4, 6])
](autoplay: true)

scene{
    Each root is revealed in sequence.
}[
    diagram{
        curve(expression: (x-1)*(x+2); colour: blue)

        cue{
            point(x: 1; y: 0; colour: orange)
            text{ x = 1 }(x: 1.3; y: 0.5; size: 14)
        }(in: 800)

        cue{
            point(x: -2; y: 0; colour: orange)
            text{ x = -2 }(x: -1.6; y: 0.5; size: 14)
        }(in: 1800)
    }(x domain: [-4, 4]; y domain: [-4, 6])
](autoplay: true)

Chalk

Read-only

cue.draw

cue.draw

Progressively draws a diagram element onto the canvas, as if being sketched in real time. Ideal for showing curves, lines, and shapes being constructed step by step.

in (optional-duration-or-integer; default: —). Time (ms) when drawing starts
out (optional-duration-or-integer; default: —). Time (ms) when element is erased
in-duration (duration; default: 750). How long the drawing animation takes
out-duration (duration; default: 750). How long the erase animation takes
easing (linear / smooth; default: smooth). Animation timing curve

diagram{
    cue.draw{
        curve(expression: sin(x); colour: teal)
    }(in: 0; in-duration: 1200)

    cue.draw{
        curve(expression: cos(x); colour: orange; dashed: true)
    }(in: 1200; in-duration: 1200)
}(x domain: [-7, 7]; y domain: [-2, 2])

diagram{
    cue.draw{
        curve(expression: sin(x); colour: teal)
    }(in: 0; in-duration: 1200)

    cue.draw{
        curve(expression: cos(x); colour: orange; dashed: true)
    }(in: 1200; in-duration: 1200)
}(x domain: [-7, 7]; y domain: [-2, 2])

Chalk

Read-only

cue.morph

cue.morph

Smoothly transforms a shape from its initial {} state to its final [] state. Use to show continuity, transformations, or animated transitions between configurations.

at (duration-or-integer; default: 0). Time (ms) when the morph begins
duration (duration; default: 750). Length of the morph animation
easing (linear / smooth; default: smooth). Animation timing curve

diagram{
    cue.morph{
        circle(x: -3; y: 0; size: 1; colour: purple)
    }[
        circle(x: 3; y: 2; size: 2; colour: teal)
    ](at: 500; duration: 900)
}

diagram{
    cue.morph{
        circle(x: -3; y: 0; size: 1; colour: purple)
    }[
        circle(x: 3; y: 2; size: 2; colour: teal)
    ](at: 500; duration: 900)
}

Chalk

Read-only

cue.morph works best when morphing between elements of the same type (e.g. circle → circle, curve → curve). Morphing between different element types may produce unexpected results.

Combining Animations

You can layer cue, cue.draw, and cue.morph blocks inside the same diagram to build up complex step-by-step explanations.

scene{
    The tangent line approaches as $h \to 0$.
}[
    diagram{
        curve(expression: x^2; colour: blue)

        cue.draw{
            segment(x1: 0; y1: 0; x2: 2; y2: 4; colour: pink)
        }(in: 0; in-duration: 800)

        cue{
            point(x: 1; y: 1)
            text{ tangent at x=1 }(x: 1.4; y: 1.2; size: 13)
        }(in: 1000)

        cue.morph{
            segment(x1: 0; y1: 0; x2: 2; y2: 4; colour: pink)
        }[
            segment(x1: -1; y1: -1; x2: 3; y2: 3; colour: green)
        ](at: 1800; duration: 1000)
    }(x domain: [-3, 4]; y domain: [-1, 9])
](autoplay: true)

scene{
    The tangent line approaches as $h \to 0$.
}[
    diagram{
        curve(expression: x^2; colour: blue)

        cue.draw{
            segment(x1: 0; y1: 0; x2: 2; y2: 4; colour: pink)
        }(in: 0; in-duration: 800)

        cue{
            point(x: 1; y: 1)
            text{ tangent at x=1 }(x: 1.4; y: 1.2; size: 13)
        }(in: 1000)

        cue.morph{
            segment(x1: 0; y1: 0; x2: 2; y2: 4; colour: pink)
        }[
            segment(x1: -1; y1: -1; x2: 3; y2: 3; colour: green)
        ](at: 1800; duration: 1000)
    }(x domain: [-3, 4]; y domain: [-1, 9])
](autoplay: true)

Chalk

Read-only

On this page

cue cue.draw cue.morph Combining Animations