elementor4fun-logo
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.

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
How to create your own Animated Headings animation 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