Last update: March 30, 2021

How to animate a Grid that uses the facet from WP-Grid-Builder

When you use WP Grid Builder (aff link) with your own grid that you have created with the EasyPosts or Repeater element, there is no option for animation.
But we can still create our own, with some JS and CSS.

In a Code Block, add this Javascript code :

window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', onInit );

function onInit( wpgb ) {
    wpgb.facets.on( 'appended', onAppended );
}

function onAppended( posts ) {
    posts.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 );
}

Click on the LOAD MORE button to see the animation. The CSS is below the grid.

How to animate a Grid that uses the facet from WP-Grid-Builder
Tips for the Composite Elements
How to use GSAP with Flickity and other sliders
How to make an animated mobile menu with GSAP
How to style the terms in a WP-Grid-Builder grid
How to make animated galleries with GSAP
How to create Entrance animations with GSAP
How to create animated sequences with GSAP

The animation is simply made in CSS with the keyframes property. Which means that we can easily customize it.

@keyframes post-animation {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translatey(0);
  }
}

.post-animation {
  animation: post-animation 0.3s ease;
}

Here are more examples :

Project #21
Project #20
Project #19
@keyframes post-animation {
  from {
    transform: scale(0) rotate(-180deg);
  }
  to {
    transform:  scale(1) rotate(0);
  }
}

.post-animation {
  animation: post-animation .8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
Project #21
Project #20
Project #19
@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;
}
Project #21
Project #20
Project #19
@keyframes post-animation {
  from {
    transform: perspective(800px) rotateX(90deg);
  }
  to {
    transform: perspective(800px) rotateX(0deg);
  }
}

.post-animation {
  animation: post-animation .6s ease;
  transform-origin:center top;
}
Project #21
Project #20
Project #19

Animista has some pretty sweet animations too, that you can easily import :

#my-grid {
perspective: 400px;
}

@keyframes post-animation {
  0% {
    -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
            transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

.post-animation {
	animation: post-animation 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
closealign-justifychevron-downcaret-up