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.
The new way to build a Slider
Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.
The 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.
Mode: Chars
Hello. I Am Peter. Ui designer.
Mode: Lines
Hello. I Am Peter. Ui designer. I craft simple & clean design solutions for web & mobile.
Mode: Words
Hello. I Am Peter.
Mode: Chars
Hello. I Am Peter.
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 words or characters. The split by chars mode is best when you have short text, 3 words at the most.
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 text effect
You can use 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 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 Text animation will move the text and the layer animation can move the color.
It’s worth adjusting the 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 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.
Slide 1
Hello.
I Am Peter.
Developer.
Editor.
Ui designer.
Slide 2
Hello.
I Am Peter.
Developer.
Editor.
Ui designer.
Slide 3
Hello.
I Am Peter.
Developer.
Editor.
Ui designer.
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.
Get on board! Join our 142,416 subscribers!
Get our latest news, tutorials, guides, tips & deals delivered to your inbox.
Hi, I’m Ramona 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.
