The great thing about WP Grid Builder (Affiliate link), is that you can now use it with the EasyPosts or Repeater elements from Oxygen.

«WP Grid Builder offers the possibility to filter custom queries without the need to use a grid made with the plugin. This means that you can use facets in your pages to filter post results.»

Which means that there are now two ways to use the plugin:

1/ With the cards you build with the plugin's builder and his own Grid settings. It's how I used it for the homepage of OXYGEN4FUN:

2/ With the EasyPosts or Repeater element, where you build your own grid and design, with Oxygen Builder.

Here is a Demo made with the Repeater:

Important

Visit these two guides to understand how it works with Oxygen :

Filter Archive Pages

Filter Custom Queries

The structure

The Shortcodes are the Facets' shortcodes from WP Grid Builder, the Repeater is used to build the Grid, and the Code Block is for the Custom animation.

Setting up the Repeater

In this page, I use the Filter Custom Queries method and I set up my Repeater like this :

wp_grid_builder=wpgb-content-1&post_type=post&posts_per_page=8&no_found_rows=true

Adding the Facets

We simply use the shortcodes from the plugin:

[wpgb_facet id="1" grid="wpgb-content-1"]

And that's it. All the facets will work with your own grid that you have built with the Repeater (or EasyPosts element).

Adding the animation

By default there is no animation when you click on the filters, so you can build your own with this snippet.

In a Code Block, add this Javascript:

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

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

function onAppended( posts ) {
    posts.forEach( animate );
}

function animate( post, index ) {

    post.style.opacity = 0;

    setTimeout( function() {
        requestAnimationFrame( function() {
            post.removeAttribute( 'style' );
            post.classList.add( 'post-animation' );
        } );
    }, index * 60 );
}

And finally, in the same Code Block but for the CSS:

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

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

As you can see, you can build your animation pretty easily.

Optimizations

You will be pleased to know what when we use WP Grid Builder with Oxygen, only the assets about the Facets will be loaded in the frontend (facets.js and facets.css).
And you can also remove Polyfills in the options :

It was just a short introduction, as it makes the plugin much more interesting since it supports Oxygen.

Special Thanks to Loic for the fantastic support.

Resources

Here is another example of WP Grid with Oxygen, from Permaslug : Map Results in Oxygen with WP Grid Builder