How to 'pjax' with bricks?

How To
23

Hi there,

I’ve tried barba.js with gsap and it works just fine.

Use this in function.php

add_filter( 'bricks/body/attributes', function( $attributes ) {
  // Add 'data-barba' HTML attribute to body with value 'wrapper'
  $attributes['data-barba'] = 'wrapper';
  return $attributes;
} );

add_filter( 'bricks/content/attributes', function( $attributes ) {
  // get page ID
  $id = get_the_ID();
  // Add 'data-barba' HTML attribute to main with value 'container'
  $attributes['data-barba'] = 'container';
  // Add 'data-barba-namespace' HTML attribute to main with current page id
  $attributes['data-barba-namespace'] = 'page-'.$id;
  return $attributes;
} );

then place this after footer

<script src="https://unpkg.com/@barba/core"></script>

<!-- load gsap animation library (minified version) -->
<script src="https://unpkg.com/gsap@latest/dist/gsap.min.js"></script>

<!-- init barba with transition -->
<script type="text/javascript">
  barba.init({
    transitions: [{
      name: 'transition',
      leave(data) {
        return gsap.to(data.current.container, {
          xPercent: -100
        });
      },
      enter(data) {
        return gsap.from(data.next.container, {
          xPercent: -100
        });
      }
    }]
  });
</script>

… just an example…you can continue with barb and gsap docs.

5 Likes