replace animated text with new text

  • hello. I want to create animated text so that after each sentence is displayed it fades out and is hidden and new text is placed in the same place, so it appears as a slideshow. Is this possible and how can I do it please. Currently I have created each text with the animations I want but each line appears below the next rather than replacing it. Thanks so much.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author eleopard

    (@eleopard)

    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:
    https://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?

    Plugin Author eleopard

    (@eleopard)

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘replace animated text with new text’ is closed to new replies.