In the past, when you wanted to add animations to WordPress, you had to use a lot of CSS or JavaScript code, and the whole process was rather complex. Whether it’s trying to animate text elements, images, have sliding content, fade in boxes, or any other kind of animation effects, it wasn’t an easy task and required coding skills.

With the use of page builders, you can easily add animations to WordPress, and wow your visitors without writing any code.

Why Use Animations on WordPress?

Animations are a great way to focus the attention of the user on an important part of a page. If you have a form, you might want to have an arrow pointing to it. Grabbing attention to the call to action area is a great way to increase conversions.

Another reason to use animations is to make the website more dynamic and interesting. If your site is content heavy, this helps light things up and make it more attractive for your user. You don’t have to load heavy videos, and can instead use the pre-existing elements that animate nicely on the page.

Animating With CSS

There are many guide that explain how to animate using CSS, but understanding how to animate is not so simple, and should be done by advanced designers that know how to prevent conflicts and bugs and code the animation correctly. Luckily, WordPress makes it easy for us to animate, using the features that come built-in into modern page builder plugins.

There are several plugins, like ‘Animate it!’, that enable you to easily add animations, but in this guide I prefer to explain how to use the page builders to add animations. The reason is that if you are animating the parts of the page, it is more than reasonable to assume that you will also have to take care of the layout of the page.

This is the function of the page builder, and I much prefer to use a single plugin to do the most things. Using page builders to animate saves us from the need to install an extra plugin, makes our site more lean, and still adds animation in the same way. It is also more accessible to be able to add animations on WordPress from the same editor, without having to integrate the page builder to the animation plugin.

Add Animations to WordPress Using SiteOrigin

To add animations with SiteOrigin, you first need to install three plugins: Page Builder by SiteOrigin, SiteOrigin Widgets Bundle and SO Page Builder Animate. This is a bit of a bummer, because as said before I don’t like to overload my WordPress.

Now, add a certain widget to the page. I added a simple button. Now I click on the button, and the SiteOrigin Panel opens up. I add the text of the button, and on the right I see the ‘Animation’ tab on the bottom. When I click it, the menu drops down. Under type I choose ‘Bounce’, Duration set to 3 seconds, Delay also to 3 seconds. Offset set to 100, which is the distance to start the animation related to the browser bottom. For Iteration I set it to no-repeat. Be sure to publish the page, because for me it didn’t work on draft.

Add Animations to WordPress Using Beaver Builder

Beaver Builder makes it easier to add animations. After installing the plugin, and editing the page with BB, add an image element, and go to setting. Under Advanced, you will see these options:  Fade In, Slide Left, Slide Right, Slide Up, Slide Down.

Choose the animation you’d like, and a possible delay. You’ll be able to preview the page and watch the animation in action. Animation comes with the lite and free version of Beaver Builder.