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?
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.