Text Effects

AnimX includes built-in plugins for animating text. Because they work with the main animation engine, you can pause, reverse, and scrub text animations just like normal CSS animations.

---

1. ScrambleText

The ScrambleText plugin rapidly randomizes text before revealing the final string. This is perfect for creating "cryptographic decoding" or hacking effects.

ENCRYPTED_DATA

60 FPS

The scrambleText options let you choose which random characters to use, and how long to scramble before revealing the real text.

import { animate } from 'animx';

animate('.password', {
  duration: 1.5,
  scrambleText: {
    text: "ACCESS_GRANTED",
    chars: "01",
    revealDelay: 0.2,
    speed: 1.5
  }
})

---

2. Typewriter

The Typewriter plugin creates a typing effect. It is highly optimized to run smoothly without slowing down the page, and it correctly handles complex text like emojis without breaking them.

> Awaiting command...

60 FPS

import { animate } from 'animx';

animate('.console', {
  duration: 2.5,
  ease: 'none',
  typewriter: {
    value: "Initializing system protocols...",
    cursor: "_",
    blinkWhileTyping: false
  }
})

---

3. BlurReveal

The blurReveal plugin is an elegant effect that splits text and animates characters or words in from a blurry, transparent, shifted state.

Beautiful cinematic text reveals.

60 FPS

import { blurReveal } from 'animx/plugins/Text'

blurReveal('#te-blur', {
  type: 'words',
  blur: 20,
  y: 20,
  duration: 1.5
})

---

4. Jigsaw

The jigsaw plugin shatters your text, flying characters in from random positions, rotations, and scales to perfectly lock into place.

JIGSAW PUZZLE

60 FPS

import { jigsaw } from 'animx/plugins/Text'

jigsaw('#te-jigsaw', {
  spreadX: 300,
  spreadY: 200,
  rotation: 180,
  scale: 0.5,
  duration: 1.2
})

---

5. Unfold

The unfold plugin splits your text by lines (or words) and folds them down like origami, creating a satisfying 3D cascade. It automatically handles CSS perspective injection.

First, you fold the paper.
Then, you crease the edges.
Finally, the shape unfolds.

60 FPS

import { unfold } from 'animx/plugins/Text'

unfold('#te-unfold', {
  transformOrigin: 'top center',
  rotateX: -90,
  fade: true,
  duration: 1.5
})

---

6. Flip3D

The flip3D effect rotates text spans along a 3D horizontal or vertical axis, mimicking the appearance of split-flap display boards.

SPLIT-FLAP

60 FPS

import { flip3D } from 'animx/plugins/Text'

flip3D('#te-flip3D', {
  axis: 'X',
  rotate: -90,
  duration: 1.2,
  stagger: 0.05
})

---

7. Glitch

The glitch effect produces cyberpunk-style digital distortion using randomized clip-paths, horizontal offsets, and multi-layered RGB text shadows.

CYBERPUNK

60 FPS

import { glitch } from 'animx/plugins/Text'

glitch('#te-glitch', {
  iterations: 10,
  intensity: 1,
  color1: '#ff0055',
  color2: '#00d4ff'
})

---

8. SineWave

The sineWave effect induces continuous, fluid wave bobbing by oscillating text characters vertically using staggered harmonic offsets.

Waving through the letters.

60 FPS

import { sineWave } from 'animx/plugins/Text'

sineWave('#te-sineWave', {
  amplitude: 12,
  duration: 1,
  stagger: 0.06
})

---

9. NeonFlicker

The neonFlicker effect emulates broken fluorescent tubing by staggering irregular quick flickers of opacity and glow radius before turning on completely.

NEON GLOW

60 FPS

import { neonFlicker } from 'animx/plugins/Text'

neonFlicker('#te-neonFlicker', {
  color: '#39ff14',
  flickers: 6,
  duration: 0.5
})

---

10. SqueezeAndPop

The squeezeAndPop effect applies a cartoonish physics sequence: characters drop from above, squash upon impact with the baseline, stretch upwards, and then settle.

BOUNCY!

60 FPS

import { squeezeAndPop } from 'animx/plugins/Text'

squeezeAndPop('#te-squeezeAndPop', {
  yOffset: -100,
  bounceHeight: -20,
  stagger: 0.06
})

---

11. Marquee

The marquee effect sets up a seamless horizontal looping scroll ticker.

KINETIC TICKER INFINITE LOOP •

60 FPS

import { marquee } from 'animx/plugins/Text'

marquee('#te-marquee', {
  speed: 60,
  direction: 'left'
})

---

12. SlotMachine

The slotMachine effect generates spinning character columns that lock into the correct text characters sequentially with a bounce.

WINNER

60 FPS

import { slotMachine } from 'animx/plugins/Text'

slotMachine('#te-slotMachine', {
  reelLength: 10,
  duration: 1.5,
  stagger: 0.08
})

---

13. ClipPathReveal

The clipPathReveal effect wipes text in using vertical, horizontal, or center-out CSS inset clipping bounds.

WIPE REVEAL

60 FPS

import { clipPathReveal } from 'animx/plugins/Text'

clipPathReveal('#te-clipPathReveal', {
  direction: 'right',
  duration: 1.2,
  stagger: 0.08
})

---

14. Scatter

The scatter effect disperses character spans into multi-dimensional offsets and rotates/scales them back into their clean final coordinates.

EXPLOSION

60 FPS

import { scatter } from 'animx/plugins/Text'

scatter('#te-scatter', {
  spreadX: 200,
  spreadY: 200,
  rotation: 180,
  scale: 0.5,
  duration: 1.5
})

---

15. TextAlongPath

The textAlongPath effect sequences text character coordinates along an SVG path.

PATH_FLOW

60 FPS

import { textAlongPath } from 'animx/plugins/Text'

textAlongPath('#te-textAlongPath', {
  path: '#te-svg-path',
  charSpacing: 0.08,
  travel: 0.25,
  duration: 1.5
})

---

16. Spotlight

The spotlight effect sweeps a circular radial gradient highlight mask across the text container.

Searching the dark.

60 FPS

import { spotlight } from 'animx/plugins/Text'

spotlight('#te-spotlight', {
  color: '#00ffff',
  darkColor: 'rgba(0, 255, 255, 0.15)',
  duration: 2
})

---

17. TextSwap

The textSwap effect transitions text content by matching string differences and sliding components vertically.

SWAP MOTION

60 FPS

import { textSwap } from 'animx/plugins/Text'

textSwap('#te-textSwap', {
  text: "ANIMATION ENGINE",
  duration: 0.8,
  stagger: 0.04
})

---

18. MatrixRain

The matrixRain effect paints columns of random green binary rain inside a canvas overlay driven by AnimX frame ticks.

60 FPS

import { matrixRain } from 'animx/plugins/Text'

matrixRain('#te-matrixRain', {
  color: '#00ff66',
  fontSize: 12,
  fadeAmount: 0.06
})

---

API Reference

These plugins are built-in and don't need to be imported separately. Just use scrambleText or typewriter inside your normal animate() options.

scrambleText Configuration

Property	Type	Default	Description
text	string	Required	The final text to display.
chars	string	"upperCase"	The characters to use while scrambling. You can use presets (like "numbers" or "all") or provide your own string (like "01").
revealDelay	number	0	How much of the animation time (0 to 1) to spend scrambling before showing the real text.
speed	number	1	How fast the random characters change.
delimiter	string	""	How to split the text. Leave empty ("") to scramble letter by letter.

typewriter Configuration

Property	Type	Default	Description
value	string	Required	The final text to display.
delimiter	string	""	"" types letter by letter. " " types word by word.
cursor	string	null	The cursor character to show at the end of the text (e.g., | or _).
cursorBlink	boolean	true	Makes the cursor blink.
cursorSpeed	number	1	How fast the cursor blinks (in seconds).
blinkWhileTyping	boolean	true	If false, the cursor stays solid while typing and only blinks when finished.