How to integrate swup.js, animsition and barba.js in the bricks child theme?

How To
1

Can someone guide me how to integrate these js libraries properly in the bricks child theme?

I was trying to edit header.php with the end div tag in footer.php file, as suggested in this tutorial: https://z-r.me/barba-js-with-wordpress/

but failed.

Another question: I was also trying to integrate animsition with bricks.

But I m not sure how to apply this in bricks. can anyone help?

and for swup.js, the markup is:

<body><main id="swup" class="transition-fade"><h1>This is homepage</h1><p>Lorem ipsum </p><a href="/someOtherPage">Go to other page</a></main></body>

bricks has default id set to “brx-content”. so, if i change it, won’t it effect the entire bricks environment? so, how to apply swup.js in bricks?

2

Not a solution, just my findings to add to this in hopes of someone more skilled coming along with the holy grail.

Integration of swup itself is fairly easy, you can change the target Id in the swup options so you won’t have to alter the default Id on the main Tag. Then using a filter you can add the transition class to it.

So far so good, pages are transitioning nicely and smoothly.

Buuut, as every time I’ve tried to integrate it with wp the issue is the proper reloading of scripts and styles.

For example in my quick test I had

Page A: an image, a title, a button and a carousel
Page B: a contact form

When going from A to B, contact Form is still there, however it’s styles are missing so it looks squished and ugly.

Going from page B to A, everything is working except for the carousel which completely disappeared.

I figured out the is-initialized class was missing from it, using one of swups helper functions I re-added it and tadaa, the carousel is back and working but also missing a few styles.

Long story short, for any kinda of viable implementation, we’d have to find a way to reload all scripts and styles of a page l, ideally without manually finding which ones we need for each module on each page.

I’ve tried using swups ScriptsPlugin but that didn’t do much.

3

There is already an older thread with a lot of responses and findings about it: