37 Cool Text Effect Animations Made with CSS & Javascript

Adding text effect animation is a great way to make it more unique and interesting and can add a fun element to your site. With text animation you can also make users stay on your website longer as catchy and interactive websites work better than boring and static ones. So in this post we`ve gathered 37 Text Effect Animations Made with CSS & Javascript for anyone who`s looking to add text animations to websites.

Simple CSS text animation

Simple CSS text animation

Demo

Typing text transition

typing text transition

Demo

Letter Animation

Letter Animation

Demo

Shattering Text Animation

Shattering Text Animation

Demo

Title Text Animation

Title Text Animation

Demo

Repellers

Repellers

Demo

Colorful text animation

Colorful text animation

Demo

Grassy Text with Variable fonts.

Grassy Text with Variable fonts.

Demo

[webkit] Animated “text-shadow” pattern

Animated text-shadow pattern

Demo

Netflix style text animation with CSS

Netflix style text animation with CSS

Demo

CSS Perspective Text Hover

CSS Perspective Text Hover

Demo

Text transform and blur

text-transform-and-blur

Demo

404 particle text

404 particle text

Demo

Glitch text with image background

Glitch text with image background

Demo

Animated wave clipped by text

Animated wave clipped by text

Demo

Random Text Shuffle

Random Text Shuffle

Demo

Text as background

Text as background

Demo

Single element, multi coloured 3d text effect

Single element, multi coloured 3d text effect

Demo

SVG Text Animation Using Stroke Offset Method

SVG Text Animation Using Stroke Offset Method

Demo

Corrupted, Grungy, Retro Text and CRT Effect

Corrupted, Grungy, Retro Text and CRT Effect

Demo

Only CSS: Text Patch Work

Only CSS: Text Patch Work

Demo

Awesome Text-Shadow

Awesome Text-Shadow

Demo

Auto Typing Text (function)

Auto Typing Text

Demo

Physical Typography – Resonate 2014

Physical Typography - Resonate 2014

Demo

CSS-only shimmering neon text

CSS-only shimmering neon text

Demo

Anime.js logo animation

anime.js logo animation

Demo

CSS3 Text Animation Effect

Cool CSS3 Text Animation Effect

Demo

Typewriter animation pure CSS

Typewriter animation pure CSS

Demo

GSAP Text Animation

GSAP Text Animation

Demo

Animated writing font (SVG paths)

Animated writing font (SVG paths)

Demo

Landing Animation for BBAE

Landing Animation for BBAE

Demo

Responsive Parallax Drag-slider With Transparent Letters

Responsive Parallax Drag-slider With Transparent Letters

Demo

Loading

Loading

Demo

Mask animation with GSAP & SVG

Mask animation with GSAP & SVG

Demo

Star Wars opening crawl from 1977

Star Wars opening crawl from 1977

Demo

THREE Text Animation #1

THREE Text Animation #1

Demo

80s Typography

80s Typography

Demo

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.