How to Animate a Grid that uses WP Grid Builder Facets

There is no animation option when using WP Grid Builder (aff link) with a custom grid created with the Post List or Post Loop Builder elements.

But it doesn't mean it's not possible, so here is how to do.

Step 1

Using your favorite Snippet Manager, add this Javascript code:

document.addEventListener("DOMContentLoaded", function () {
window.WP_Grid_Builder && WP_Grid_Builder.on("init", onInit);
function onInit(wpgb) {
wpgb.facets.on("appended", onAppended);
}

function onAppended(posts) {
posts.forEach((element) => {
const article = element.querySelectorAll(".ee-post");
article.forEach(animate);
});
}

function animate(post, index) {
post.style.opacity = 0;

setTimeout(function () {
requestAnimationFrame(function () {
post.style.opacity = 1;
post.classList.add("post-animation");
});
}, index * 60);
}
});
wpgb-snippet

Step 2

Then add this CSS animation, directly in your page in a Code Block, or still with your Snippet Manager.
As you will notice, the animation is pretty basic. It's a simple fade effect with a smooth vertical transition. It's what we have in the homepage when we click on the facets.

@keyframes post-animation {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translatey(0);
}
}

.post-animation {
animation: post-animation 0.3s ease;
}

Another example

Still with the same Javascript code but with a different CSS animation:

Categories
  • All
  • Tutorials (29)
  • Tips (9)
sorry bro, no results!
@keyframes post-animation {
from {
transform: perspective(600px) scale(0) rotateX(-40deg) rotateY(30deg) translate(0, 300px);
}
to {
transform: perspective(600px) scale(1) rotateX(0) rotateY(0) translate(0, 0);
}
}

.post-animation {
animation: post-animation .8s ease-in-out both;
}