Smart Slider 3
The smartest, smoothest, most precise
slider creating software for web.
Add text layer animation
Animate your headings
How to create Split text animation in WordPress slider
Create fancy word animations
Split texts and animate characters
Split text animation in Joomla
Transition text layers
Split modes: char
word and lines
A slider that will blow your mind
All the layers you would expect from a professional slider builder tool.
They just work – in precisely the way you want them to.
Los Angeles, CA
on August 19th 2016,
We’re getting married!
Arrow
Arrow
Arrow
Arrow
Slider
Artist
Marriage
Slider

WP Slider’s heading with Split text animation

Are you familiar with presentation tools, like Microsoft© PowerPoint? Even if you aren’t, you might have seen some presentations made with the product mentioned above, where a long paragraph faded, bounced or flew in, line by line. They looked cool back in the day – and they still do. 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 split text animation. Still doesn’t ring any bells? Check out a few examples in this video.

Scene Slider

Description: This is an awesome mockup slider to create custom scenes. A great way for any creative person to show off their work. All images are separated layers so you can build your own composition.

Tags: , , , , ,

Our eyes were made to see not just what is happening right in front of us, but what is around us. We automatically try to focus on things that start moving near us. Even if we weren’t even paying attention to our surroundings, like when we read an article or watch TV. Probably this comes from the prehistoric times, when seeing the smallest movement of a wild animal was a critical situation. Life and death depended on it. Nowadays there are tricks to make the eye see movements even if they’re not actually happening. But why would you let your users see your texts moving as an optical illusion, when you can create a fancy, smooth text animation to impress them?

What is a split text animation?

The split text animation is special kind of animation, which can only be applied to the heading layer in Smart Slider for WordPress. These animations are not really layer animations, rather textual ones, giving you the opportunity to animate the text itself – not as a “block” but as a chain of lines, words or characters. Every mode has its own advantage and disadvantage, and we’re going to explore them, but first, let me say a few words about the basics of these animations.

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.
Arrow
Arrow
Mode: Chars - Sort: Normal, Duration: 1500, Stagger: 200, Offset-X: 200
Slider

As I mentioned above, probably the popular presentation tools are one of the main reasons why we still look for the split text animations and prefer them to static or block-like animations. To be able to animate a part of the actual text at one time is great. It is not resource heavy and works perfectly in all browsers. Flash animations were bad not only because the user was forced to download an external plugin to see them, but because these animations were resource heavy, causing usability issues on slower computers.

Two types of split text in Smart Slider plugin: IN & OUT

The IN split text animation is similar to the IN layer animation. These two IN animations run parallel. The main difference is that the layer animation runs on the actual layer. But the split text animation only affects the text itself. It might happen that the layer animation has already been done, but the split text hasn’t, causing an empty background appearing on the slide. And there’s the other situation, when the split text animation runs before the layer animation, making it seem that the split text is not working at all.

The OUT split text animations are just like the OUT layer animations. These animations run on the text itself, and not on the layer that contains it. Because of this, it can happen that the text has already faded out, but the background is still there as its out animation hasn’t happened yet.

The Split text animation has a common limitation that you cannot modify them from the timeline, and only the Split text – IN animation appears and only the delay adjustable.

Split modes of the animation

The default mode is the character. This mode splits the entered text into characters, and animates each character separately. It works best with short texts, e.g.: a few words and short sentences. The animation builder has lots of options which helps you to create truly unique animations. One of the most interesting and useful option is the Sort, which allows the text to appear in normal, centered, side and random order, all has a reversed mode except for the last one. For example you can animate your latest WP blog post’s title.

The word mode animates the entered text on a word basis, and animate them each. This mode works best on middle-length sentences, starting from 3 words each, but it is also a great choice when the character mode would take too long to appear. Texts that are 1-2 words long are not really able to benefit from this animation.

The third mode cuts the text into lines. If your text is short, like 4-5 words only, simply split it into lines by yourself pressing enter before the word which should be in the next line. When the text plays the animation line by line you can use the stagger option to add extra time between the appearance of two lines.

There are bags of predefined animations which you can choose from if you are not feeling like creating one for yourself. And when you finished creating your breathtaking split text animation, you can save it for future use. You might create your own set to help you organize the animations better. Just like the layer animations, the split text animations are available in the pro version only on all platforms (WordPress, Joomla and HTML).

Version Overview

Pro only
  • Split text animation

Similar Sliders -

Layer slider – Create a unique and personal slider with your own contentWooCommerce landing page with product carouselHow to create scroll parallax slider block with background video

Related pages