by Ramona Nemeth-Csoka on April 1, 2019

How to Create a Cool Text Animation

Text Animation

Are you familiar with presentation tools, like Microsoft© PowerPoint? Even if you aren’t, you might have seen some examples of the text animation. Think about a paragraph, which fades, bounces or flies in line by line. The effect looks cool and that’s why web designers have started to use it. But why would you need to fade in a long paragraph line by line in your WordPress site? Well, of course to catch your users’ attention, and to amaze them with a split text effect.

The human eye reacts to any movement happening in its sight. It doesn’t matter whether you’re paying attention to your surroundings or not. Nowadays there are tricks to make the eye see movements even if they’re not actually happening. That’s called an optical illusion, and it’s a very popular technique in web design. But why would you let your users see your texts moving as an optical illusion? You can create real, fancy text animation to impress them instead.

What is a text animation?

The text animation describes the effect when the text is animated in a special way. Of course, you can easily create such effect using Smart Slider 3 plugin. In Smart Slider 3, the heading and animated heading layers have the ability to animate their text. Many plugins make it possible to animate texts, but that’s usually a layer animation, not a text effect.

What’s the difference? Text animations affect the actual text as lines, words or characters. A layer animation affects the layer as a block.

Need a good WordPress plugin to create text animations for your site? Give Smart Slider 3 a try. Its pro version lets you create a beautiful and modern text effects.

Smart Slider 3 Icon
Bring Your Ideas to Life
Powerful. Visual. Intuitive. Smart Slider 3 is the most advanced slider and block creation tool for WordPress and Joomla.

Split text animation

The split text effect is a special kind of animation you can use in Smart Slider 3. You can add it to any heading layer of your slider. The effect splits the content of the heading layer to lines, words or characters. For this reason, the heading layer can’t support any kind of HTML code, as that couldn’t work with this split.

Hello.
I Am Peter.
Ui designer.
Hello. I Am Peter.
Ui designer.
I craft simple & clean design solutions for web & mobile.
Hello. I Am Peter.
Hello. I Am Peter.
previous arrow
next arrow
Slider

Split text effect options

You can fine-tune this animation using many options. You can decide if you want to animate your text by splitting it into lines, words or characters. The split by chars mode is best when you have short text, 3 words at the most. In contrast, the lines mode can’t work well with short texts, because you won’t be able to see it.

It’s also possible to change the order the text appears. For instance, if you animate by chars, you can make them appear from left to right or right to left or even from the center. There’s also an option to rotate or scale the text.

Show or hide text using split text effect

You can use split text effect to show and hide the text, as if you’d use an in- and an out layer animation. This allows you to create spectacular effects to enhance your slider. The split text animation runs at the same time with the layer animation. As said before, this effect affects the text only. So if you have a heading layer which has a background color you’ll need to use both animations. The split text animation will move the text and the layer animation can move the color.

It’s worth adjusting the split text and layer animations to start at the same time. You might add a text and layer animation to your layer, too. But if they don’t start at the same time, the text animation can finish by the time the layer animation starts. If it’s an in animation, you won’t be able to see the split text effect. If it’s an out animation and the layer has a background color, the color stays while the text have faded out.

Animated heading layer

The animated heading layer can create beautiful text effects, too. For instance, you can use this layer to create the ever-popular typewriter effect. This effect makes the text looks like as if it were being typed by a typewriter. The effect looks really nice on any website and also saves you some real estate on the page.

Hello.
I Am Peter.
Developer.
Editor.
Ui designer.
Hello.
I Am Peter.
Developer.
Editor.
Ui designer.
Hello.
I Am Peter.
Developer.
Editor.
Ui designer.
previous arrow
next arrow
Slider

The animated heading layer has many cool settings for you to use. One of the best is being able to loop the animation, so it plays endlessly. The other popular option is being able to enter static texts, which are not affected by the animation.

Ramona Nemeth-Csoka

About Author

I’m Ramona Nemeth-Csoka and I’m a member of Nextend‘s awesome support team. You’ve probably chat with me if you’ve submit a support ticket. When I’m not answering support emails I read a book or go cycling. I enjoy writing as well, both for our blog and for my private projects.