Back to Gallery
Text Scramble Decode
£5 Standard License Unlimited projects
Cipher-style text animation that scrambles characters and decodes to reveal content. Scroll-triggered, hover, and auto-play modes with custom timing.
About This Effect
A cipher-style text animation that scrambles characters through random glyphs before revealing the final content. Inspired by sci-fi terminal interfaces and hacker movie aesthetics, this effect supports multiple trigger modes including scroll-triggered reveals, hover interactions, click events, and auto-play sequences. Each character resolves independently with configurable timing and direction.
What's Included
- Four trigger modes: scroll, hover, click, and auto-play
- Five decode directions: left-to-right, right-to-left, center-out, edges-in, and random
- Configurable scramble speed with fast, normal, and slow presets
- Custom character sets for the scramble animation
- ScrollTrigger integration with automatic viewport detection
- Group mode for staggered multi-element reveals
- Global replay control and start/complete custom events
- Lightweight requestAnimationFrame implementation
- Accessible — respects prefers-reduced-motion
Perfect For
- Hero headline reveals and landing page intros
- Section titles that decode as users scroll
- Interactive hover effects on navigation or menu items
- Loading states and transition screens
- Cyberpunk or tech-themed website headers
How It Works
The effect captures each element's original text and builds a per-character queue with randomized start and completion thresholds. requestAnimationFrame cycles unresolved positions through the configured glyph set until each threshold resolves to the final character. Direction options change how thresholds are distributed, while GSAP coordinates delayed sequences, repeating playback, and optional ScrollTrigger activation.
Plugins ScrollTrigger
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
