Word by word animation in a sentence

You can create a word-by-word text animation using Animate It!
Example: https://edsanimate.wpdevcloud.com/words-animation/

Please note that this animation can be looped only once. Meaning the last text would stay.

Please follow these steps:

1. Create a sequence of animation one after the other.
e.g. FadeIn enters and delay=0
2nd FadeIn enters and delay=1
3rd FadeIn enters and delay=2 etc.

2. Go to text only view of the editor, and wrap all these aniamtions into a DIV, Give it a class (in this case, the class is “words-slideshow-wrapper”) and Save.

Here’s an example block:

<div class="words-slideshow-wrapper">
	[edsanimate_start entry_animation_type= "fadeInDown" entry_delay= "1" entry_duration= "0.5" entry_timing= "linear" exit_animation_type= "" exit_delay= "0" exit_duration= "0.5" exit_timing= "linear" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]
		DREAM 
	[edsanimate_end]
	[edsanimate_start entry_animation_type= "fadeInDown" entry_delay= "2" entry_duration= "0.5" entry_timing= "linear" exit_animation_type= "" exit_delay= "0" exit_duration= "0.5" exit_timing= "linear" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]
		BIG, 
	[edsanimate_end]
	[edsanimate_start entry_animation_type= "fadeInDown" entry_delay= "3" entry_duration= "0.5" entry_timing= "linear" exit_animation_type= "" exit_delay= "0" exit_duration= "0.5" exit_timing= "linear" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]
		START 
	[edsanimate_end]
	[edsanimate_start entry_animation_type= "fadeInDown" entry_delay= "4" entry_duration= "0.5" entry_timing= "linear" exit_animation_type= "" exit_delay= "0" exit_duration= "0.5" exit_timing= "linear" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]
		SMALL.
	[edsanimate_end]
</div>

3. In your WordPress backend, Add the following CSS in Settings > Animate It! > Custom CSS block (you can adjust the font size/style as per needed):

.words-slideshow-wrapper {
text-align: center;
font-size: 42px;
font-weight: bold;
}

.words-slideshow-wrapper br {
display: none !important;
}

.words-slideshow-wrapper > .eds-animate {
display: inline-block;
}

That’s it! This should add a nice Word by word animation in a sentence on your website.