Using WP-Grid-Builder (aff link) with Oxygen is awesome but we lose the ability to animate the cards.
In a previous tutorial, I have explained how to add some CSS animation to the cards.
In this tutorial, we are going to use the GSAP method. Click on the LOAD MORE button to see the animation in action!
Easy Posts: how to dynamically add special css classes for posts?
Polylang condition in Oxygen: how to use one template for different languages
Oxygen bug fix: Images in content are not responsive
How to pause Slides autoplay when you hover over?
Oxygen bug fix: Sticky Header overlaps Modal and Gallery lightbox
Free SVG icon set from Unicons for Oxygen
Toggle in Oxygen: how to close the rest when opening one tab?
6 Steps to Successful Oxygen Site Migration
And here is the full JS code :
window.WP_Grid_Builder && WP_Grid_Builder.on('init', onInit);
function onInit(wpgb) {
wpgb.facets.on('appended', onAppended);
}
function onAppended(posts) {
posts.forEach(post => {
post.classList.add('card-animation');
});
gsap.fromTo(".card-animation", {
autoAlpha: 0,
scale: 2
}, {
duration: 1.5,
scale: 1,
autoAlpha: 1,
ease: "elastic.out",
stagger: 0.1,
onComplete: removeCardClass
});
}
function removeCardClass() {
const cards = document.querySelectorAll(".card-animation");
cards.forEach(post => {
post.classList.remove('card-animation');
});
}Basically, what we do here :
- We add the .card-animation class to the new cards that show up when we click on the LOAD MORE button
- We animate those cards with GSAP (using the same selector, obviously)
- Then GSAP call the function removeCardClass when it's finished. That way, the already animated cards won't be animated again.
I don't give more details about the GSAP part as there are already several tutorials available here.