A small JavaScript library to 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.
Rough Notation is about 3.3kb in size when gzipped.
Visit website to see it in action and check out the source code for the website
You can add rough-notation to your project via npm
npm install --save rough-notation
Or load the ES module directly
<script type="module" src="https://unpkg.com/rough-notation?module"></script>Or load the IIFE version which created a RoughNotation object in your scope.
<script type="module" src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"></script>Create an annotation object by passing the element to annotate, and a config to describe the annotation style.
Once you have the annotation object, you can call show() or hide() on it to show the annotation
import { annotate } from 'rough-notation';
const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline' });
annotation.show();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 show is called on the group, the annotations are animated in order.
import { annotate, annotationGroup } from 'rough-notation';
const a1 = annotate(document.querySelector('#e1'), { type: 'underline' });
const a2 = annotate(document.querySelector('#e3'), { type: 'box' });
const a3 = annotate(document.querySelector('#e3'), { type: 'circle' });
const ag = annotationGroup([a3, a1, a2]);
ag.show();When you create an annotation object, you pass in a config. The config only has one mandatory field, which is the type of the annotation. But you can configure the annotation in many ways.
This is a mandatory field. It sets the annotation style. Following are the list of supported annotation types:
- underline: Create a sketchy underline below an element.
- box: This style draws a box around the element.
- circle: Draw a circle around the element.
- highlight: Creates a highlight effect as if maked by a highlighter.
- strike-through: This style draws a box around the element.
- crossed-off: This style draws a box around the element.
Boolean property to turn on/off animation when annotating. Default value is true.
Duration of the animation in milliseconds. Default is 800ms.
Delay in animation in milliseconds. Default is 0ms.
String value representing the color of the annotation sketch. Default value is currentColor.
Width of the annotation strokes. Default value is 1.
Padding between the element and roughly where the annotation is drawn. Default value is 5 (in pixels).
If you wish to specify different top, left, right, bottom paddings, you can set the value to an array akin to CSS style padidng [top, right, bottom, left] or just [top & bottom, left & right].
When you call the annotate function, you get back an annotation object, which has the following methods:
Returns if the annotation is showing
Draws the annotation. If the annotation is set to animate (default), it will animate the drawing. If called again, it will re-draw the animation.
Hides the annotation if showing. This is not animated.
Unlinks the annotation from the element.
When you call the annotationGroup function, you get back an annotation group object, which has the following methods:
Draws all the annotations in order. If the annotation is set to animate (default), it will animate the drawing. If called again, it will re-draw the animation.
Hides all the annotations if showing. This is not animated.
Rough Notation has wrappers for multiple libraries and frameworks: