RSK World - Text Animation Effects | Typewriter, Fade-in, Glitch, Neon, CSS Keyframes | RSK World

Typewriter & Fade Slide & Bounce Glitch & Scramble Neon & Gradient Vanilla JS

Text Animation Effects is a collection of creative text animations. Features: typewriter (character-by-character with blinking cursor), fade-in (up/down/left/right/scale), slide from four directions, bounce/wave/pulse/shake, staggered reveal (e.g. RSK World 2026), animated gradient text, glitch effect (CSS pseudo-elements + clip-path), text scramble (JS, cycles phrases), neon glow, clip-path reveal, 3D flip, blur-in reveal, typewriter + backspace (multiple phrases), letter spacing expand, underline sweep, highlight sweep, wavy text, rotate-in letters, dancing shadow, split reveal, gradient border text, rainbow text, spotlight text, fill text, line-through draw, bounce-in letters, scale-in pop. Respects prefers-reduced-motion. HTML, CSS, Vanilla JavaScript. By rskworld.in.

If you find this Text Animation Effects project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Text Animation Effects

Typewriter & Fade-in

Typewriter effect types out data-text character by character with blinking cursor (JS). Fade-in animations: fade in, fade in up/down/left/right, fade in scale. Staggered delays on cards. Respects prefers-reduced-motion for entrance animations.

runTypewriter() – data-text, speed, pauseEnd, loop
Fade cards: fadeIn, fadeInUpCard, fadeInDown, fadeInLeft/Right, fadeInScale
animation-fill-mode: both, staggered animation-delay
CSS variables: --bg, --surface, --accent, --accent2

Project Structure & Files

text-animations/ with index.html (demo page with all effects), styles.css (keyframes, animations, variables), script.js (typewriter, scramble, typewriter-advanced). No build step. Open index.html or serve folder.

text-animations/ – index.html, styles.css, script.js, README.md, LICENSE
No build step – open index.html or static server
Fonts: Outfit, JetBrains Mono (Google Fonts)
Zero dependencies; vanilla HTML, CSS, JavaScript

Slide, Bounce & Stagger

Slide from left/right/top/bottom. Bounce, wave, pulse, shake. Staggered character reveal using --i and calc(0.05s * var(--i)). Section titles use slide-in-left. Dark theme with accent colors.

Slide: slideFromLeft, slideFromRight, slideFromTop, slideFromBottom
Bounce, wave, pulse, shake keyframes
Stagger: .char with animation-delay calc(0.05s * var(--i))
Variables: --bg, --surface, --text, --accent, --accent2

Advanced CSS Effects

Animated gradient text (background-clip: text), glitch (::before/::after + clip-path), neon glow (text-shadow pulse), clip-path reveal, 3D flip (rotateY), blur-in reveal. Letter spacing expand, underline sweep, highlight sweep.

Gradient text – gradientShift keyframes, background-clip: text
Glitch – content: attr(data-text), clip-path polygon slices
Neon – neonPulse, layered text-shadow
Clip-path reveal, flip3d, blurIn keyframes

JS Effects & More

Text scramble: random chars then resolve to phrase, cycles data-phrases (JSON). Typewriter + backspace: types phrase, deletes, next phrase. Wavy text, rotate-in letters, dancing shadow, split reveal, gradient border, rainbow, spotlight, fill, line-through draw, bounce-in letters, scale-in pop.

scrambleText() – data-phrases, scrambleChars, tick()
runTypewriterAdvanced() – multiple phrases, type/delete cycle
Staggered letters: --i on .wavy-char, .rotate-in-char, .bounce-in-char
Reduced motion: animation-duration 0.01ms for looping only

What You Get

Static HTML/CSS/JS: text-animations/ folder with index.html, styles.css, script.js, README.md, LICENSE (MIT). No build step. Open index.html or serve folder.

Complete source – text-animations/ with HTML, CSS, JS
No build step – open index.html or static server
README.md, LICENSE (MIT) included
Technologies: HTML5, CSS3, Vanilla JS. © 2026 Molla Samser (RSK World).

Usage

Open index.html. Scroll to see all sections: typewriter (auto-runs), fade-in grid, slide showcase, bounce/wave/pulse/shake, staggered reveal, gradient text, glitch, scramble (cycles phrases), neon, clip-path, 3D flip, blur-in, typewriter+backspace, and more.

text-animations/index.html – single demo page
script.js initializes typewriter, scramble, typewriter-advanced on DOMContentLoaded
Accessibility: prefers-reduced-motion, ARIA where applicable
Author: Molla Samser | rskworld.in

Project Features

Typewriter, fade-in (6 variants), slide (4 directions), bounce/wave/pulse/shake, staggered reveal, gradient text, glitch, text scramble, neon glow, clip-path reveal, 3D flip, blur-in, typewriter+backspace, letter spacing, underline/highlight sweep, wavy/rotate-in/dancing shadow, split reveal, gradient border, rainbow, spotlight, fill, line-through, bounce-in letters, scale-in pop. Reduced-motion support.