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!

A better Smooth Scroll with Lenis
SwiperJS - Tips and Good Practice
Create a Circular Progress Bar with GSAP
A better Progress Bar with GSAP
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

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 => {

    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 => {

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.