How to Animate RoughNotation Annotations in Order

RoughNotation provides an annotation group for exactly this: pass a list of annotations to createGroup, then call show() on the group and the annotations animate in sequence rather than all at once. This is the right approach when you want to walk a reader through several points one at a time — a step-by-step tutorial, a guided tour, or a sequence of callouts that would be overwhelming if they all appeared together.

The mechanism: annotation groups

Individually, each annotation is shown by calling show() on it. If you call show() on five annotations in a row, they all start animating immediately, so the effect reads as one simultaneous flash.

An annotation group changes that. You create a group from an ordered list of annotations, and when show is called on the group, the annotations are animated in order — the sequence follows the order of the list you passed in. The group is the ordering device; the individual annotations keep their own styles and timing.

Steps

1. Create your annotations as you normally would, one per element you want to mark. Each annotation carries its own style (underline, box, circle, highlight, strike-through, crossed-off, or brackets) and its own configuration such as color, strokeWidth, and animation duration.
2. Collect them into a list in the order you want them to appear. The list order is the animation order, so decide the narrative sequence here rather than relying on DOM order.
3. Create the group by passing that list to the group-creation function.
4. Call show() on the group instead of on the individual annotations. The group drives the animation of its members in sequence.

The expected result: the first annotation in your list draws itself, then the second, and so on, producing a guided reveal.

What you can configure

Because ordering is handled by the group and appearance is handled by each annotation, the two concerns stay separate:

That last point matters for sequencing: if one annotation in the group has animation disabled, it still participates in the group's order — it just appears instantly at its turn instead of drawing itself.

Common snags

• Calling show() on the annotations instead of the group. This is the most likely reason a sequence collapses into a simultaneous reveal. The group is what enforces order.
• Assuming DOM order determines sequence. It doesn't; the order of the list you pass to the group does.
• Expecting a group to unify styling. It doesn't. Set color, strokeWidth, and duration per annotation if you want them to differ.
• Forgetting that multi-line inline content is supported. If an annotation spans multiple lines, it still behaves as a single member of the group and takes its turn in the sequence.

When this is the right tool

Use an annotation group when the order of emphasis is part of the message — for example, annotating three clauses of a policy one after another so the reader follows the argument, or circling a button only after underlining the instruction that leads to it. If all the marks are meant to be read as a single static diagram, you don't need a group at all; just create the annotations and show them.

The library's code and documentation are on GitHub, and the project is maintained by @preetster on Twitter.