• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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.  

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

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

Download Folder

Animation CSS Grid Columns

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.