Conversation
supportYou can create a rotating text animation using Animate It! Example: 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.
No comments were stored for this source.