How to use GSAP with WP-Grid-Builder

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!

A better Smooth Scroll with Lenis

Tutorials

SwiperJS - Tips and Good Practice

Tips

Create a Circular Progress Bar with GSAP

Tutorials

A better Progress Bar with GSAP

Tutorials

Create a simple Parallax Effect with Motion.page

Tutorials

How to use GSAP with WP-Grid-Builder

Tutorials

How to use Swiper with Oxygen

Tutorials

A better mobile menu with Mmenu

Tutorials

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.