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 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
How to create a justified gallery
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

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