Use Rough Notation in Javascript | Awesome animated scribble library ✏️

In this video, I show you how to use the awesome Rough Notation library to add super-cool animated scribble annotations to your page.

✏️ Link to the Rough Notation Library: https://roughnotation.com/

✨ Video Contents: ✨

00:34 - Bringing the Rough Notation library into the project with a script tag.
00:58 - ⚠️ IMPORTANT: adding type=“module” to our index.js script tag to make the library work.
01:08 - Importing the library into our JS file.
01:36 - Adding ids to our HTML.
01:47 - Grabbing the ids in our JS with getElementById.
02:33 - Adding notations, choosing the type and color.
03:35 - Running the annotation in the browser.
04:40 - Adding padding to the annotations.
05:22 - Adding the bracket notation, controlling which brackets are displayed.
05:41 - Changing the stroke width.
05:52 -Refactoring the show() invocations and making the animations run sequentially with annotationGroup.
06:36 - Changing the order in which the animations are run.
06:53 - Using a media query to turn off the animations when the user has selected the reduced motion setting.
08:00 - Turning off individual animations.

--

const me = {
name: "Leanne ??",
passions: ["coffee☕️", "code ?", "cats ?"],
unpopular_opinion: "LOVES CSS ❤️",
favorite_colors: ["hotpink", "orangered"],
channel_aim: "Show the world that CSS is fun and web development rules! ?"
}

--

? Say hi on Twitter: https://twitter.com/RybaLeanne
? Join the Scrimba Weekly Web Dev Challenge: https://scrimba.com/learn/weeklychallenge