Adding New Animations to Beaver Builder’s Modules

Happy New Year, all! After a very tame NYE, I could muster up the energy to post a short article to show you how to you can add new animation styles to Beaver Builder, with just a few lines of code.

Click here to see an example of what we’ll be creating.

What we’ll learn

  • How the core plugin structures it’s code, and why this makes the job even easier for us
  • How to write a basic animation in CSS using keyframes
  • How to use a filter to add the new options to module settings forms

Introduction

Out of the box, Beaver Builder supports the following animations:

  • Fade In
  • Slide Left & Right
  • Slide Up & Down

If you didn’t know, these animations only get triggered when the module comes into view on the page (using a library called jQuery Waypoints) – very cool.

If you’re interested, you can see this in the plugin’s code, inside Classes/FLBuilder.php

As an aside – one thing I love about Beaver Builder (and will no doubt mention over and over again) beyond the user-friendliness, stability etc, is how the code is written.

It’s eloquent, clean, object-oriented and so easy, even as a mid-level developer, to open core files and read functionality. I’m penning another post on using Beaver Builder as a development framework, so stay tuned!

Back to animations…

Diving into the plugin’s code

The structure is already in place, and we simply have to extend the functionality.

Without getting too bogged down, let’s quickly check the core plugin’s code and see what it’s up to.

Again, we’re in classes/class-fl-builder.php, and the code I’ve highlighted above is in the render_module_attributes method.

All we need to know here is that if the animation property has been specified (by the user, in the module’s settings form), then there will be new CSS classes added:

fl-animation and fl-whatever-the-animation-is

With that in mind, if we now jump briefly over to includes/module-settings.php, we will see all of the default options that you see in the front end.

So the code that we saw earlier in class-fl-builder.php is using the value of the animation field, and appending it as a CSS class name, if the animation is set in the module settings form.

So as an example, if we select Fade In from the select field, then the class appended to the module would be

fl-animation fl-fade-in

And that’s all there is on the backend side of things – nothing to do, other than observing how it works.

So now let’s track down the CSS. This time it’s in css/fl-builder-layout.css

In this case, I’ve just highlighted the fade-in CSS property, but there is similar CSS just below for slide-left, slide-right, slide-up, slide-down.

It’s very simple, straightforward styling made up of a CSS class and a keyframe for each type of animation.

So let’s create our own!

Creating a basic CSS animation

I’ll start with the CSS, as although it’s out of the scope of this article (you can research more on keyframes W3 Schools, or the one and only CSS Tricks), it’s pretty quick and painless.

In this example, I have decided to add Roll Left and Roll Right animations to my project.

To get started, I’ve ‘borrowed’ the CSS styles from the core plugin, modified it, and added it to my theme’s CSS.

I’ve created 2 keyframes called fl-roll-left and fl-roll-right, and have used the CSS transform property to

  1. Start the animation with the element at 100% to the right (translateX(100%)) (and vice-versa for fl-roll-right)
  2. Start the animation with the element rotated 180 degrees (rotate(180deg)) (and vice-versa)
  3. Start the animation with opacity of 0
  4. End the animation with the element at it’s original position (translateX(0%))
  5. End the animation with the no rotation (rotate(0deg))
  6. End the animation with an opacity of 1

I’ve then applied the keyframes to the CSS class .fl-animated.fl-roll-left and .fl-animated.fl-roll-right with a 1 second duration, and an ‘ease-out’ transition (like the plugin’s core code, however you can alter this if you need).

You can include this CSS either in your theme’s stylesheet (and perhaps clean up the code a little if you use SCSS), otherwise, just include it in the Beaver Builder layout CSS (Tools > Layout CSS / JavaScript).

Adding new animation options to the module settings form

For this, we need to use the fl_builder_register_settings_form filter, which will allow us to modify the options we see in the select field.

You can include this in your functions.php file, or if like me, you want to keep things modular and organised, you might create a separate file called bb-animations, which you then require into your theme.

I will write more about this in the future, but at the time of writing, Beaver Builder plugin settings are made up of arrays inside arrays inside arrays. Perhaps daunting for new developers, but an absolute breeze when you know how arrays work.

(Check out this video and then this video to get started with arrays – the guy is a GREAT teacher, and I watch his stuff nearly every day).

For the purpose of this example, all we need to know is that the form we need to modify is a Module’s ‘advanced’ settings, which on the front end looks like this:

In this case, I already know that the Module’s ‘Advanced’ settings form has an ID of ‘module_advanced’.

(As an aside: if you want to find out all of the current forms’ IDs so you can reference them in code, use the filter we’re currently working with – fl_builder_register_settings_form – and var_dump( $id )), like so:

In the filter, we are given access to the $form array which contains all of the fields (in another post, I’ll cover how $form is structured).

You’ll see in the below snippet that I have created a basic ‘key value’ array called $new_module_animations – this is perhaps an unnecessary step, but I anticipate adding a few more animations, and thought that this code was a little cleaner, but that is purely personal preference.

I then loop over the new array using foreach and append the key and value to the ‘options’ array, within the ‘animation’ array, within the ‘fields’ array (which is within the ‘animation’ ‘section’), which you should be able to see from the line within the foreach loop.

In this array, the key (eg. ‘roll-left’ or ‘roll-right’) will serve as the value inside the select field, and the value (eg. ‘Roll Left’ or ‘Roll Right’) will be the text you, as a user, will see in the select field. Subsequently, as we discovered earlier, this value will be appended to ‘

Subsequently, as we discovered earlier, this value will be appended to ‘fl-‘ to make up the CSS class name that will be added to the module when it’s been added to the page, eg. ‘fl-roll-left’.

This will trigger our earlier CSS animation, as per the example at the top of this article!

If you really wanted to, you could also safely remove the default animations, by using the same filter and the unset function, eg:

As always, if you’ve got any questions, comments or feedback do let me know in the comments section below.

If you’ve found it useful, then I’d appreciate if you could share with people who you think would benefit from it.

Roll on 2017… did 2016 even happen?

Here's the thing... I love to write and teach, but I'm terrible at self-promotion. If you found this article interesting, I'd really appreciate if you'd share this article with people you think would also enjoy it.

2 thoughts on “Adding New Animations to Beaver Builder’s Modules

    • Yeah – I guess it’s a difficult balance – how deep to go into a topic to provide high quality info Vs. keeping it readable – particularly with Beaver Builder having a fairly broad user base. I guess I’m still learning about who the audience might be (although I do hope that it’s the ‘dabbler developers’) so that I can geek out a little and not overwhelm.

      If I can inspire a few people to start pushing the boundaries of BB, then it’d make me very happy.

      Thanks, David!

Leave a Comment