Animated typography, or text animation, is one of the most effective ways to present textual content — and it also looks visually appealing. Animated text is often used in web design either as a decorative element (e.g., headers, menus) or as a whole block that helps draw the visitor’s attention to important information. In general, animated typography adds a unique flair to a website, making it less dull and monotonous.
When text moves in an unusual way at a readable speed, it becomes captivating. Visitors become intrigued and want to see what happens next or what message will be revealed. A great example of text animation usage is in advertising. But it’s also widely used in web design.
For example, check out the projects blueberrylabs.com, lrxd.com, impertinents.com/#/, werkstatt.fr/home, weareroyale.com/#/, craftedlogo.com, vitosalvatore.com and many others shown in the screenshots below. As of the time of publication, all links in the article are active.
Thus, animated text or animated typography can be used on a homepage, a title (jdand.co), landing page, navigation (vitosalvatore.com), in informational blocks tied to specific topics (bonnemarque.se/case/freewrite/), or as tooltips and floating labels (e.g., cookie names on lapierrequitourne.com/nos-biscuits/). If you look closely at the examples, you’ll notice that the animation is never irritating — instead, it captures attention and adds uniqueness, even within minimalist or flat design styles.
Text animation can be implemented on a site as GIF images, or as Flash objects (FLV), which are lightweight and allow access from mobile devices. The simplest way to create animated typography is to use Photoshop, which supports multiple methods — some simple, some more complex. However, other tools are also available.
Creating Animation
Ready-made text animation packs allow you to add effects like letter floating, flying, expanding or shrinking. You can even make your text "laugh" or express an emotion. These presets can be accessed in Adobe After Effects via Adobe Bridge, where the "Preset – Text" folder contains a huge number of text animation styles. When creating a new project and text layer, simply drag the desired preset onto the layer and adjust it on the timeline to build beautiful typography animations. You can then export the finished animation as a video.
Of course, not every web designer is a master of After Effects. That’s why we’ll also look at a more accessible method — using Photoshop. Still, it’s a good idea to have After Effects installed to build your animation typography library.
Typography Animation in Photoshop
Step 1
Start by choosing a text style that fits your website’s overall aesthetic. If you're creating tattoo-related content, for instance, the colors, illustrations, and fonts should reflect that theme. Photoshop already includes many fonts in a tattoo style, so you may not even need to search for free font packs online.
In a new Photoshop document, create a text layer using your chosen font and apply any additional effects or color. Prepare the text as it should look during the animation. If your animation includes multiple stages, plan how each one should appear.
Step 2
In Photoshop, you'll need multiple layers (frames) to create the animation. Yes, it can be tedious, but it gives you better control over timing and smoothness — ideal for those not skilled in video editors or timeline-based tools.
Step 3
Now start creating layers, each showing a different stage of the animation. For typing animations, each new layer reveals an additional letter. Don’t forget to use brushes and filters if needed so that the text matches your original concept. With this approach, Photoshop lets you build beautiful and custom text animations — just remember to stay consistent with your site's overall styling. Try different effects and experiment!
Step 4
Remember: when using brushes “above” the text, you’ll need new layers. Only then can brush drawings be included in the animation. For example, you can add swirls, dots (in our case, ink splatters). Everything must be layered. If you want to animate a text highlight, erasing a wrong letter and retyping it correctly, it all has to happen on separate layers.
Step 5
Now it’s time to bring your text to life and preview the result. In the main menu, go to Window > Timeline. Then select “Create Frame Animation.” Each layer will become a frame, which you can still adjust, change its duration, or even add sound to the video.
If you instead choose “Frame Animation,” you’ll need to manually duplicate each frame via “Duplicate Frame” in the Animation panel. You won’t place layers on a timeline but rather control their visibility frame by frame. This also results in a typing text animation — with a bit more effort, you can even add smooth transitions.
Step 6
All that’s left is to save your animation as a GIF and embed it in the desired location on your site. Now that you’ve either learned or refreshed your Photoshop animation skills, you can create amazing text effects. 
To save as a GIF, go to “ Save for Web ”. If you choose video export, you can create a .mov file (H.264 codec) or an .avi. However, video files are much larger in size than GIFs.
Tips for Creating High-Quality Typography Animation
Conclusion
No doubt, animation impresses and grabs attention. Animated text can engage users much faster and more effectively than static info blocks. Today, more and more web designers, video editors, and creative directors use typing effects in their projects to add personality and uniqueness.
The earlier examples show different animation styles — typing, fading, sliding, or glowing text. Such animations don’t overload your site, fit the project’s style, and avoid feeling like forced or unnecessary additions some designers throw in “just to show skills” or “to impress the client.”
Which method you use — Photoshop or After Effects — is up to you. As a final note, check out the animation of text and images on cristof-echard.fr. It’s a great example that can easily be recreated in any editor.