Dear Kerrie,
Thanks for using the Animate It!
You can create a text slideshow using the Animate It! However, on down side is, you cannot make the slideshow loop. So it will go just once, and last Sentence can stay as the final text.
You can see the demo of the slideshow here:
http://animateitdemo.wpdevcloud.com/demo-for-kerrie/
Let me know if this would work for you, and I’ll provide you with the steps on how to do it.
Heya! I am interested in achieving something similar. Can you please provide the steps for me too?
Hello Wpbuilder0,
Thanks for using the Animate It!
Please follow these steps:
1. Create a sequence of animation one after the other.
e.g. FadeIn enters and delay=0 and exits at delay=3
2nd FadeIn enters and delay=3 and exits at delay=3
3rd FadeIn enters and delay=9 and exits at delay=3 etc.
2. Go to text only view of the editor, and wrap all these aniamtions into a DIV and Save.
e.g.
<div class="ai-slideshow-wrapper">
[edsanimate_start entry_animation_type= "fadeInDown" entry_delay= "0" entry_duration= "0.5" entry_timing= "linear" exit_animation_type= "fadeOutDown" exit_delay= "3" exit_duration= "0.5" exit_timing= "linear" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]
<p style="text-align: center;">This is Sentence 1.</p>
[edsanimate_end]
[edsanimate_start entry_animation_type= "fadeInDown" entry_delay= "4" entry_duration= "0.5" entry_timing= "linear" exit_animation_type= "fadeOutDown" exit_delay= "3" exit_duration= "0.5" exit_timing= "linear" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]
<p style="text-align: center;">Here comes Sentence 2.</p>
[edsanimate_end]
[edsanimate_start entry_animation_type= "fadeInDown" entry_delay= "8" entry_duration= "0.5" entry_timing= "linear" exit_animation_type= "fadeOutDown" exit_delay= "3" exit_duration= "0.5" exit_timing= "linear" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]
<p style="text-align: center;">Drumrolls for Sentence 3.</p>
[edsanimate_end]
[edsanimate_start entry_animation_type= "fadeInDown" entry_delay= "12" 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= ""]
<p style="text-align: center;">And Finally! Sentence 4 is here to stay.</p>
[edsanimate_end]
</div>
3. Go to Settings > Animate It! > Custom CSS Box and Paste the following CSS:
.ai-slideshow-wrapper .animated{
width: 100%;
position: absolute;
top: 0;
left: 0;
}
This should make the animations come in one after the other.
Please let me know if this works.