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.

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 :

@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);
}

@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;
}

@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;
}

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;
}