Create and Animate Annotations on a Web Page
Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.
Annotation styles include Underline, Box, Circle, Highlight, Strike Through, Crossed-Off, Brackets, and Multiple Lines.
Various properties of the annotation can be configured, like color, stroke-width, animation duration.
Rough Notation provides a way to order the animation of annotations by creating an annotation-group. Pass the list of annotations to create a group. When the show is called on the group, the annotations are animated in order.
Rough Notation is 3.8kb in size when gzipped, and the code is available on GitHub.