Setup the section

Add a section with 2 columns. In the Design tab of the Row Settings turn on Equalize column heights.

Add a text module

Add a text module to the left-hand column. Add your text content. For this example I added a h2 and some body text.

Then in the Advanced tab give it two custom css classes of text-reveal and reveal.

In the After box, give it a background colour. This is the colour that will appear briefly before the text.

e.g. background: #F3f3f3

Add an image

Add an image to the right-hand column.

In the Advanced tab give the image two custom css classes of image-reveal and reveal.

Then expand Custom CSS tab and in the After field, give it a background colour. This is the colour that will appear briefly before the image.

e.g. background: #f9574f;

Add another row (optional)

Clone the row and update the image and text box with different content. You can also change the background colour of the after element if you’d like to use different colours. In this example I’ve used 4 different colours for the images but kept the text the same colour.

To make sure the text always appears on top of the image on mobile, add a class of column-swap to the row where the image is in the left-hand column.

Save the layout!

Add the CSS

Add the following css to your custom css in your theme options. This CSS will add the reveal effect, as well as vertically centre the text in the column, and reverse the order of the columns on mobile if you added the “column-swap” in the step above.

Note: The vertically centred text doesn’t display in the visual builder, but does on the front-end, so don’t worry if it doesn’t look centred when editing!

Add the javascript

Without this javascript the effect will happen on all modules when the page loads, so if an image is half way down the page you won’t see the effect.

What this javascript does is trigger the effect when the module scrolls into the screen.

It’s also setup so if a user has javascript disabled in their browser, the modules will still load so users won’t miss any content.

If you’d like to use this effect on multiple pages then add the following javascript to the body box of the “Integrations” tab in you theme options.

If you’d just like to use it on a single page, you could also add it to a code module on that page so you don’t have to load it on every page.

Save and you’re done!!

This tutorial is really just a starting point to show you the technique, but there’s so much more you could do with it! You could add in some animation-delays and animate multiple elements in each section. Or even have a completely animated hero sections for when the page initially loads.

I’ll probably make some more complicated animations using this method in the future, so if you’d like to know when they’re available for download you can sign-up to the B3 email list today!