Barba.js implementation?
-
Hello! I am trying to implement Barba.js transitions, according to the documentation provided on their repo.
I’ve added the barba wrapper to the header template of the website, and closed it in the footer template.
Then, I’ve added the barba container as part of the single.php template in the Hello elementor theme. Added some javascript, as well as some CSS taken from here , just to test the functionality.
The issue is that the website does not seem to undergo a correct transition, if it undergoes one at all. The CSS, at the very least, does not take effect in what concerns the barba.js transition.
I am also getting a console error related to the barba.js import:
Uncaught SyntaxError: import declarations may only appear at top level of a moduleSide note: your plugin returns this error:
The resource from “https://apexdigital.ro/wp-content/plugins/ooohboi-steroids-for-elementor/lib/scroll_to/ScrollToPlugin.min” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).Across my website.
I would appreciate any help! ?? thank you for your amazing work.
The page I need help with: [log in to see the link]
-
The reason why your CSS would not load is because you did not adapt the link that represents the path to your elementor CSS files.
This is the script that is on the website from Oooh Boi:
<script> ; (function() { document.addEventListener("DOMContentLoaded", () => { gsap.set('.ob-barba-loader', { scaleX: 0, rotation: 30, xPercent: -5, yPercent: -50, transformOrigin: 'left center', autoAlpha: 1 }); barba.hooks.beforeEnter(({current, next}) => { // Set <body> classes for the 'next' page if (current.container) { // // only run during a page transition - not initial load let nextHtml = next.html; let response = nextHtml.replace(/(<\/?)body( .+?)?>/gi, "$1notbody$2>", nextHtml); let bodyClasses = jQuery(response).filter("notbody").attr("class"); jQuery("body").attr("class", bodyClasses); // ELEMENTOR // Where the magic happens - this loads the new Elementor styles and removes the old styles if (bodyClasses.includes("elementor-page")) { let currentPageId = current.container.querySelector(".elementor").getAttribute("data-elementor-id"); let nextPageId = next.container.querySelector(".elementor").getAttribute("data-elementor-id"); let oldScriptURL = "https://ooohboi.space/barba/wp-content/uploads/sites/8/elementor/css/post-" + currentPageId + ".css"; let newScriptURL = "https://ooohboi.space/barba/wp-content/uploads/sites/8/elementor/css/post-" + nextPageId + ".css"; // Add this for cache fix: ?cachebuster=' + new Date().getTime() console.log('Old css: ' + oldScriptURL); console.log('New css: ' + newScriptURL); console.log(current.container); const oldElementorScript = document.querySelector('link[src="' + oldScriptURL + '"]'); if (oldElementorScript) { oldElementorScript.remove(); } loadjscssfile(newScriptURL, "css"); } } }); barba.init({ debug: true, timeout: 5000, transitions: [{ async leave() { await loaderIn(); }, enter() { window.scrollTo(0, 0); loaderAway(); } }] }); }); loaderIn = function() { // GSAP tween to stretch the loading screen across the whole screen return gsap.fromTo('.ob-barba-loader', { rotation: 10, scaleX: 0, xPercent: -5 }, { duration: 0.4, xPercent: 0, scaleX: 1, rotation: 0, ease: 'power4.inOut', transformOrigin: 'left center' }); } loaderAway = function() { // GSAP tween to hide loading screen return gsap.to('.ob-barba-loader', { duration: 0.4, scaleX: 0, xPercent: 5, rotation: -10, transformOrigin: 'right center', ease: 'power4.inOut' }); } // This function helps add and remove js and css files during a page transition loadjscssfile = function(filename, filetype) { if (filetype == "js") { //if filename is a external JavaScript file const existingScript = document.querySelector('script[src="${filename}"]'); if (existingScript) { existingScript.remove(); } var fileref = document.createElement("script"); fileref.setAttribute("type", "text/javascript"); fileref.setAttribute("src", filename); } else if (filetype == "css") { //if filename is an external CSS file const existingCSS = document.querySelector(<code>link[href='${filename}']</code>); if (existingCSS) { existingCSS.remove(); } var fileref = document.createElement("link"); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename); } if (typeof fileref != "undefined") document.getElementsByTagName("head")[0].appendChild(fileref); } })(); </script>if you just copied this code it is obvious that your css will not load because the code includes the individual path of his website.
It’s actually this part of the code that has to be adapted
// ELEMENTOR // Where the magic happens - this loads the new Elementor styles and removes the old styles if (bodyClasses.includes("elementor-page")) { let currentPageId = current.container.querySelector(".elementor").getAttribute("data-elementor-id"); let nextPageId = next.container.querySelector(".elementor").getAttribute("data-elementor-id"); let oldScriptURL = "https://ooohboi.space/barba/wp-content/uploads/sites/8/elementor/css/post-" + currentPageId + ".css"; let newScriptURL = "https://ooohboi.space/barba/wp-content/uploads/sites/8/elementor/css/post-" + nextPageId + ".css"; // Add this for cache fix: ?cachebuster=' + new Date().getTime()You would have to copy your individual CSS path of your elementor page css folder
in my case it was the following path:
“/wp-content/uploads/elementor/css/post-“
Hey @ooohboi Looks like Elementor is now loading inline CSS for Pages instead of the post-id.css file. Any awesome tips as to How could we comply with these changes for Barba?
Context: https://elementor.com/help/conditional-and-inline-css-load-experiment/
Thank you! Really love what you do! )
- The topic ‘Barba.js implementation?’ is closed to new replies.
