Title: Text Rotator
Last modified: November 24, 2022

---

# Text Rotator

 *  Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/)
 * (@eleopard)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/text-rotator/)
 * You can create a rotating text animation using Animate It!
    Example: [https://edsanimate.wpdevcloud.com/text-rotator/](https://edsanimate.wpdevcloud.com/text-rotator/)
 * _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 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,
   Give it a class (in this case, the class is “rotator-slideshow-wrapper”) and 
   Save.
 * Here’s an example block:
 *     ```
       <div class="rotator-slideshow-wrapper">
       	This is 
       	[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= ""]
       		Text 1
       	[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= ""]
       		Text 2
       	[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= ""]
       		Text 3
       	[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= ""]
       		Text 4. It will stay
       	[edsanimate_end]
       </div>
       ```
   
 * 3. In your WordPress backend, Add the following CSS in Settings > Animate It!
   > Custom CSS block:
 *     ```
       .rotator-slideshow-wrapper > .eds-animate{
       	display: inline;
       	position: absolute;
       	margin: 0 6px;
       }
   
       .rotator-slideshow-wrapper  {
       	position: relative;
       	font-size: 32px;
       }
   
       .rotator-slideshow-wrapper br 
       {
       	display: none !important;
       }
       ```
   
 * This should add a nice text based slideshow on your website.

The topic ‘Text Rotator’ is closed to new replies.

 * ![](https://ps.w.org/animate-it/assets/icon-256x256.png?rev=989356)
 * [Animate It!](https://wordpress.org/plugins/animate-it/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/animate-it/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/animate-it/)
 * [Active Topics](https://wordpress.org/support/plugin/animate-it/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/animate-it/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/animate-it/reviews/)

 * 0 replies
 * 1 participant
 * Last reply from: [eleopard](https://wordpress.org/support/users/eleopard/)
 * Last activity: [3 years, 8 months ago](https://wordpress.org/support/topic/text-rotator/)
 * Status: not a support question