Animations are the heart of a website! Apart from improving visual appeal, they also help improve the user experience and therefore bring more user engagement. The main heading is the first thing a user notices on a website, so it is all the more important to deliver the correct brand message via it.
Here is a collection of attractive, responsive text animations that you can add to your website's main title!
- Rotating Text
- Letter-by-Letter Text Reveal Animation
- Text Split and Reveal Animation
- Text Slide Up
- Text Outline Animation
- Text Shadow Animation
- Infinite Text Loop
- Text Rotate Animation
A Rotating Text Animation made using CSS position and animation properties! It also uses text-shadow properties to create an outline around text.
📎 View code here.
A Text Reveal Animation made using CSS position properties to animate the pseudo elements of respective letters and reveal them in a step by step fashion!
📎 View code here.
A Text Split and Reveal Animation made using CSS position properties to animate the pseudo elements to move up and down revealing the hidden text inside!
📎 View code here.
A Text Slide Up Animation made using CSS text shadow properties to animate each word to slide up in a smooth manner!
📎 View code here.
A Text Outline Animation made using svg and animating it with CSS!
📎 View code here.
A Text Shadow Animation made using CSS background properties and pseudo elements!
📎 View code here.
A Infinite Text Loop Animation made using transform translate property!
📎 View code here.
A Text Rotate Animation made using CSS transform properties! JS is used to change the heading after an interval and properly play the rotate animation.
📎 View code here.