elementor4fun-logo
Last update: March 12, 2022

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!

Create a simple Parallax Effect with Motion.page
How to use GSAP with WP-Grid-Builder
How to use Swiper with Oxygen
A better mobile menu with Mmenu
How to create your own Animated Headings animation with GSAP
How to animate a text along a path
How to add some reveal animations to your elements
How to add a Lightbox to the Gutenberg Gallery Block

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.

closealign-justifychevron-downcaret-up