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:
How to create animated sequences with GSAP
How to create looping animations with GSAP
How to create some parallax effects with GSAP
How to use GSAP with Oxygen Builder
How to change the Code Block Theme
How to use WP Grid Builder with Oxygen
How to add a Ripple Effect to your buttons
Masking images & videos in CSS
Important
Visit these two guides to understand how it works with Oxygen :
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