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);
}
});
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);
}
});
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;
}
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:
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;
}
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;
}