Animated text highlighter

Demo to preview the plugin:

Live Demo: https://ze


Highlight text with animated drawings just like with a highlighter or a pen.
Different ways of application:
  • Animate on hover
  • Auto-animate when it is in the centre of viewport
  • Animate programmatically via workflow

Plugin Element Properties

The plugin contains a Animated Annotations visual element that should be used on a page.
Image without caption


Settings if you want to trigger it on hover, otherwise, use Animate action.
Trigger on hover
When enabled (true), the annotation will only show when the user hovers over the element with the mouse. Otherwise, the annotation is static or controlled by other triggers.
yes / no
Elements ID
Text elements IDs to animate on hover event. Separate each ID by a comma.
Animate Method
Determines the type of annotation to be created. It could be a string representing one of the annotation styles supported by RoughNotation, such as 'underline', 'box', 'circle', 'highlight', or 'strike-through'. If 'bracket' is chosen, additional properties for brackets will be used.
The color of the annotation. Users can input any valid CSS color value to customize the appearance of the annotation, such as 'red', '#FF0000', 'rgba(255, 0, 0, 0.5)', etc.
The padding around the annotated element, specified in pixels. It creates space between the annotated element's content and the annotation itself.
---- Bracket method settings ----
Bracket Position
NOTE: Only for Brackets method, for any other method, it will not influence. Type witch side you want to annotate brackets separated by a comma. Example: left,right or top,bottom or left,bottom,ritght etc.
Bracket Width
NOTE: Only for Brackets method, for any other method, it will not influence. Bracket width in pixels, for example " 3 ".
---- Auto animate when it is in center of viewport ----
Animate in viewport
It will trigger animation when the selected element will be in the center of the page.

Element Actions

1. Animate -Β create and manage annotations on HTML elements
Image without caption
*Note - for the fields description please see the visual element
  1. Remove All - Use it to remove all annotations
Image without caption
  1. Remove By Id - Use it to remove one or more annotations by id
Image without caption
Type id for elements you want to remove, for example " underline " if it's one element, or separated by " , " without any spacing for more, example " circle,underline β€œ
Text (list)

Workflow example

  1. Place the visual element on the page and adjust the necessary settings
Image without caption
  1. You can also use it as an action, triggered by an event in your workflow
Image without caption
  1. To remove a particular annotation use the Remove By Id action
Image without caption