AnimateIt inserts line breaks around target text

Dear Acugnini,

Thanks for using the Animate It!

The problem you are referring to, is due to the default WordPress Editor behavior to add <p> or <br> tags.

e.g. if you have added:

[edsanimate_start entry_animation_type= "fadeIn" entry_delay= "0" entry_duration= "0.5" entry_timing= "linear" exit_animation_type= "" exit_delay= "" exit_duration= "" exit_timing= "" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]

Animate Me!

[edsanimate_end]

WordPress will add tags, so when you open it on the front-end, it will look something like:

<p> [edsanimate_start entry_animation_type= "fadeIn" entry_delay= "0" entry_duration= "0.5" entry_timing= "linear" exit_animation_type= "" exit_delay= "" exit_duration= "" exit_timing= "" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""] </p>

<p> Animate Me! </p>

<p> [edsanimate_end] </p>

A simple solution here would be to use the whole animation on one single line (no breaks) e.g.:
[edsanimate_start entry_animation_type= "fadeIn" entry_delay= "0" entry_duration= "0.5" entry_timing= "linear" exit_animation_type= "" exit_delay= "" exit_duration= "" exit_timing= "" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]Animate Me![edsanimate_end]

Another way to go here could be using the RAW HTML Plugin.

Using this, you have add the above Short-code as:

[raw shortcodes=1]
[edsanimate_start entry_animation_type= "fadeIn" entry_delay= "0" entry_duration= "0.5" entry_timing= "linear" exit_animation_type= "" exit_delay= "" exit_duration= "" exit_timing= "" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]

Animate Me!

[edsanimate_end]
[/raw]

And the WordPress will not add any tags by itself under the space [raw]…[/raw]
Please note that you add [raw shortcodes=1], so that the Short-codes inside will run.

Let me know if this works.

• This reply was modified 8 years ago by eleopard.
• This reply was modified 8 years ago by eleopard.
• This reply was modified 8 years ago by eleopard.

Same thing happening to me. No <p> tags are being inserted that I can see. I tried the [RAW] option and that didn’t help. I have 3 DIVs that I am trying to animate. Without the animation, they all appear on the same line. Once I add the animation code to each DIV, the DIVs appear on separate lines.

Dear Hinerpartners,

Thanks for using the Animate It!

DIVs tend to take the complete width of the page, and that might be the reason is your case for this issue.

Please try the following solution:

Add the following CSS in Settings > Animate It! > Custom CSS Box

.side-by-side{
	display: inline-block;
}

Now add this side-by-side class to your animations, or add it to Custom CSS class box in Options Tab, when you’re adding the Animations using Shortcode.

Please let me know if this works.
Just in case, if this does not work, please post the link where you’ve got this issue. That would help me look into this in detail.

• This reply was modified 8 years ago by eleopard.

Hi, thanks for the quick reply. Unfortunately this didn’t accomplish what I was hoping for. If I place the code within the DIV, the text animates correctly, but I am trying to get the entire DIV to animate. Here’s a link to what’s happening.
“https://www.hinerpartners.com/test/wordpress16/what-we-do/&#8221;
I made a duplicate of the page so I can continue to work on my homepage. As you scroll down the page, you’ll see some boxes. These are the DIVs. The top three boxes are how I want them to appear, just animated. The next three boxes are being stacked when the animation code is added. I’d like these boxes to appear side by side and each box fadupin when scrolled. I get animation.css to work but I’ll need to add some jquery to get them the animate on scroll. Figure the plugin would be a nice way to go if I can get it to accomplish what I’m looking for. Thanks! ??

As a followup…if I enclose the 3 DIVs in one animation then all animate and remain in one row, however the same animation timing is applied to all 3 DIVs. I was hoping to delay the timing of the animation for each DIV so they would fadeUpIn individually. If all else fails I can live with that, just not ideal.