Animate Elements In Grid Columns

This tutorial contains the code which enables you to display images and text in a 3 columns grid and animate the images. The images on page load, rotate with a delay between each image like this :

You can use the code in this tutorial to :

• Output your images & content in columns using PHP with Genesis Hooks
• Copy & paste the HTML into a widget area
• Copy & paste the HTML into a Gutenberg block.

Demo Video

Shows the image in each column animated with a delay on page load.

Tested using the Genesis Sample & Parallax Pro child themes by StudioPress however will work in any Genesis child theme.

Installation Steps

There’s 2 + steps :

1. # Copy & paste the PHP code which includes the HTML, to the end of your child themes functions file OR into a page template. If you want to use the HTML in a widget area or block, only copy the first snippet for the load_animation function to the end of your functions file and copy the HTML for the rt-container div from the 2nd code snippet for the animate_html function into your HTML widget or block.

 


2. # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

 

Step 3 – Once you’ve installed the code, you can then swap out the links to your images in the HTML.

Download Folder