TextHighlight

The TextHighlight plugin animates a background color layer behind text nodes, simulating marker highlight or underline effects.

---

Marker Type (type: 'marker')

Setting type: 'marker' generates a thick background layer that extends slightly beyond the text boundaries.

Highlight with a Marker

60 FPS

---

Underline Type (type: 'underline')

Setting type: 'underline' generates a thin background layer anchored to the bottom bounding edge of the text node.

Draw an Underline

60 FPS

---

Offset & Height Configuration

The height and offset properties allow explicit dimensional and positional configuration of the highlight layer, bypassing the predefined type profiles.

Custom Full Highlight

60 FPS

---

Advanced Control: Timelines & Callbacks

The TextHighlight plugin integrates with AnimX core utilities, including timeline() sequencing. Timeline sequencing supports advanced chaining of highlight properties with standard CSS transforms.

LearnToAnimate

60 FPS

---

How to use TextHighlight

The effect requires passing the textHighlight configuration object to the animation properties.

Important: The target element must compute a display value of inline or inline-block to accurately constrain the highlight width to the text node dimensions.

import { animate } from 'animx';

animate('.marker-text', {
  duration: 1,
  textHighlight: {
    color: '#ffd93d',
    type: 'marker'
  }
});

Changing the Size and Position

import { animate } from 'animx';

animate('.custom-text', {
  duration: 1.5,
  textHighlight: {
    color: '#ff6bdf',
    height: '4px',
    offset: '100%'
  }
});

---

Properties

Property	Default	Description
color	`'var(--yellow, #ffd93d)'`	The color of the highlight.
type	`'marker'`	Choose `'marker'` (a thick line that slightly overlaps the text) or `'underline'` (a thin line at the bottom).
height	null	Choose your own exact height (e.g., `'4px'` or `'40%'`). This overrides the `type` setting.
offset	null	Choose your own exact vertical position (e.g., `'85%'` or `'100%'`). This overrides the `type` setting.