TextGradient

The TextGradient plugin applies animatable CSS linear gradients to text nodes. It supports morphing color stops, positional offsets, and rotational angles.

---

Colors Array Configuration

The stops property accepts an array of color values. The plugin calculates the interpolation between the initial and target color stops.

COLOR MORPHING

60 FPS

---

Angle Configuration

The angle property accepts a numeric degree value, which controls the rotational axis of the linear gradient.

SPINNING ANGLE

60 FPS

---

Stop Position Configuration

You can animate the position of individual gradient stops, creating shimmer sweeps and highlight wipes. The plugin interpolates each stop's position independently, so the bright highlight literally slides from one end of the text to the other.

SWEEP SHIMMER

60 FPS

---

Timelines & Callbacks

The TextGradient plugin integrates with AnimX core utilities, including timeline() sequencing and lifecycle callbacks (onStart, onComplete). This enables complex bidirectional sweeps or synchronized scaling sequences.

CHAINED SWEEP

60 FPS

---

How to use TextGradient

The effect requires passing the textGradient configuration object to the animation properties, containing an angle and a stops array.

import { animate } from 'animx';

animate('.gradient-text', {
  duration: 2,
  textGradient: {
    angle: 135,
    stops: ['#ff6b6b', '#ffd93d', '#6bcb77']
  }
});

Exact Positions

The stops array supports discrete position configuration by passing objects structured with color and position (0-100) parameters.

import { animate } from 'animx';

animate('.gradient-text', {
  textGradient: {
    angle: 0,
    stops: [
      { color: '#7c6fff', position: 0 },
      { color: '#ff6bdf', position: 100 }
    ]
  }
});

---

Properties

Property	Default	Description
angle	`90`	The direction of the gradient in degrees.
stops	`[]`	An array of colors. You can use simple strings (`'#ff0000'`), strings with percentages (`'#ff0000 50%'`), or objects (`{ color: '#ff0000', position: 50 }`).