Animated Annotations in WordPress with Rough Notation and Intersection Observer API

Rough Notation is a small JavaScript library to create and animate annotations on a web page.

This premium tutorial provides the steps to set up animated annotation (highlight, cross, circle, underline etc.) text on page load or as the text comes into view.

By default Rough Notation shows all the animated annotations on page load.

There could be times when your heading or other text is present below the fold and you want to bring focus to the text when the user has just finished scrolling past that element. We can achieve this using JavaScript's Intersection Observer API. This tutorial covers two variations using Intersection Observer - annotation animation triggering only once when the element enters the viewport and triggering on and off when scrolling down and back up.

Getting Started

Create a test Page, edit it with Oxygen and add a Heading and a Text component inside a Section.

Next let us load Rough Notation on this Page.

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site's /wp-content/plugins/my-custom-functionality-master.

Upload rough-notation.iife.js to the plugin's assets/js directory.

Create a file named say, rough-notation-init.js in the same location having the following sample code: