Kiln for Bricks Buy Kiln

Modules / Elements

Elements: animated text annotations

Animated text annotations

Draw a hand-drawn underline, box, circle, highlight, strike-through, cross or brackets over text. The strokes draw in when the text scrolls into view or when the page loads.

#22 of 39 modules by votes

  • On by default
  • Needs Bricks 2.4 or newer
  • Tested with Bricks 2.4.3
Buy Kiln · all 39 modules, US$79 a yearBrowse the other 38 modules
Recording: someone picks Underline in a heading’s Annotation settings, then on the live page the underline draws as the heading scrolls into view.Recorded in Bricks 2.4.3

How to use it

  1. Select a Heading, Basic text or Rich text element and open the Content tab.
  2. In the Annotation section, choose a Style: Underline, Box, Circle, Highlight, Strike-through, Crossed off or Brackets. The other fields appear once you pick one.
  3. Under Annotate, choose what to draw on: The whole text (the default), Highlighted words (<mark>), Bold words or Italic words. For the last three, wrap those words in <mark>, bold or italic in the text.
  4. Set the Color. If you leave it empty, the stroke uses the element's text color. Highlight uses #ffe066.
  5. Set Stroke width (px) (1 to 12, default 2) and Draw time (ms) (0 to 5000, default 800).
  6. Under Draw, choose When scrolled into view (the default) or When the page loads.
  7. Open the page on the front end. The builder canvas does not show the strokes.

Underline, Strike-through and Highlight draw one stroke per line of text. Box, Circle, Crossed off and Brackets draw one shape around each annotated part: the whole text, or each marked, bold or italic part.

Where it appears in Bricks

Content tab of the Heading, Basic text and Rich text elements, in an Annotation section.

Limits

  • Annotations draw on the front end only. The builder canvas renders these elements itself and does not show them.
  • Highlight is made for light backgrounds.
  • The strokes are decorative. They sit in an SVG hidden from screen readers, and the text itself is not changed.
  • Visitors who prefer reduced motion see the strokes drawn without animation.
  • The strokes are slightly irregular, and the same element gets the same shape on every load. They redraw when the element changes size.
  • An element with position: static becomes position: relative, so the strokes move with it. For Highlight, Kiln also sets isolation: isolate on the element, so the highlight paints behind the text and above the element's own background.
  • Elements added after the first load by Bricks (AJAX query results, loaded pages and popups) get their annotations, but only when the module's script is already on the page. An annotated element in the first HTML of the page loads it.
  • The script is about 10 KB unminified and uses no library. It loads only on pages with an annotated element.

Settings

None. Turn the module on in Bricks > Kiln (it is on by default).

Requirements

Bricks 2.4 or newer.