TOPIC: Adding Animations Side by Side

Many users have asked us about adding the animations side-by-side to their content. Here's a step by step guide on how to do it:

Step 1. Go to Settings > Animate It! and add the following rule to Custom CSS block:


It should look something like this:


Step 2: While adding animations, add "side-by-side" class to the Custom CSS Class box.
It should look something like this:


Note: please remember to omit the "." from the class name.

Step 3: Click Insert and your animation will be applied side by side.

This would add your animations side by side. Please feel free to let me know if you face any issues.
If you find the plugin useful, please take some time to put in a few good words:
https://wordpress.org/plugins/animate-it

Have a nice day.

Hello, I found your plugin great and have bought you a yoga mat! But I have a problem.

How does one achieve side-by-side custom css in joomla? I tried adding the css in the wordpress answer to the system-animateIt plugin but that didn't seem to work?

Can someone answer this for me?

Hi Dbb,

Thanks for your support.
Ideally the solutions posted above for WordPress should work for Joomla! as well.
Can you send me link to the pages where this issues is?

That way I can see if there are any other changes needed.
Thanks.

Thank you for the quick response! unfortunately the site isn't live. I could provide screenshots if that would be helpful? Just some extra information I am trying to add 3 images to animate in different ways in a procession. I am putting the images in custom module position within a grid layout from GKGavick but this shouldn't matter I believe?

Ok, Sorry, my own stupid fault.... I was doing things and forgetting to change them back when neccessary. I may have questions in the future but this one is resolved

Hi, I have managed to get content side by side but only 2 elements. Is there a way to get multiple elements side-by-side using CSS?

TIA

dbb