Loading Effects for Grid Items in Genesis Framework

In the previous guide, I shared with you steps to animate any part of your Genesis child theme. In this post, I will take a step further and share with you some cool ways to change the animation.

This guide is inspired by this post which share some stunning tricks on how to show loading effects in grid items using CSS animations.

Let’s try those tricks on Genesis Framework and see how they turn out.

Remember the Option #1 in the previous post? Well, we’re essentially going to following the same method but will change CSS code depending on the effects we want to create.

For the sake of convenience, I’d like to reiterate the steps:

Step #1: Add a Class to the part you want to animate.
Step #2: Add appropriate CSS code snippet depending on the animation you wish to create.

Let’s pretend we want to target the .entry to add a class for MoveUp animation effect. In this case, you want to add a class to the .entry by adding the following code snippet to your functions.php file.

In the second step, you want to add the following css code snippet to your style.cssfile.

That’s it! You can now see the the animation every time you reload your page.

Watch it in action here.

Try These Animations Too

There are different types of effects you can create by adding appropriate CSS code snippet as given below.

However, you will need to make necessary changes in the php code depending on whichever attribute you want to target, and then choose from the appropriate CSS code snippets for your desired animation.

I hope you find this guide useful. Please, let me know if you have any questions.