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.

AnimX.animate('.password', {
  duration: 1.5,
  scrambleText: {
    text: "ACCESS_GRANTED",
    chars: "01",      // Only use 0s and 1s for scrambling
    revealDelay: 0.2, // Pure scrambling for the first 20% of the tween
    speed: 1.5        // Flicker speed multiplier
  }
})

---

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

AnimX.animate('.console', {
  duration: 2.5,
  ease: 'none', // 'none' is best for linear typing, but you CAN ease it!
  typewriter: {
    value: "Initializing system protocols...",
    cursor: "_",
    blinkWhileTyping: false
  }
})

---

API Reference

These plugins are built-in and don't need to be imported. Just use scrambleText or typewriter inside your normal AnimX.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.