Search the Community

GSAP SplitText Not Visible After Barba.js Page Transition - Need Help Hi GSAP Community, I’m quite new to GSAP and Barba.js, and I’ve run into an issue I can’t seem to solve. Everything else works perfectly, but the GSAP SplitText animation just doesn’t become visible as expected after transitioning to the new page. Context: I’m using Barba.js for smooth page transitions and GSAP SplitText to animate text on my project pages. When transitioning from one page to another, I want to trigger a SplitText animation that animates the text character by character. The image animation works just fine, and the page transitions themselves (in and out) are smooth, but for some reason, SplitText doesn’t display the animated text even though the animation runs (I can see the logs in the console). This is my Read-Only-Link: https://preview.webflow.com/preview/portfolio-81ef14?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-81ef14&preview=747b7b5ad79fb03ec0425ecc1111ba19&workflow=preview I attached a Video that shows the Issue. Example.mov <!-- Include GSAP, ScrollTrigger, and SplitText --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script> <script src="https://cdn.prod.website-files.com/66fd5dee766f9835d57167dd/671a387c610c8e295f8bdc44_SplitText.txt"></script> <!-- Include Barba.js --> <script src="https://unpkg.com/@barba/core"></script> <script> // Function to initialize GSAP animations for the new content function initGSAP() { console.log("Initializing GSAP Animations..."); // Set initial opacity and position for text and image before the animation gsap.set("#main-text", { opacity: 0, y: 50, visibility: "visible" }); gsap.set(".portfolio-header7_image", { opacity: 0, y: 100, visibility: "visible" }); // SplitText animation: animate character by character if (document.querySelector('#main-text')) { if (typeof SplitText !== "undefined") { let splitText = new SplitText("#main-text", { type: "chars, words" }); console.log("SplitText successfully loaded and split:", splitText); // Animate the split characters gsap.to(splitText.chars, { opacity: 1, y: 0, // Text comes up from below stagger: 0.05, // Delay between characters duration: 1, ease: "power2.out" }); } else { console.error("SplitText could not be loaded."); } } // Image animation: opacity and position from below if (document.querySelector('.portfolio-header7_image')) { gsap.to(".portfolio-header7_image", { opacity: 1, y: 0, duration: 1, ease: "power2.out" }); } // Refresh ScrollTrigger to ensure new triggers are set correctly ScrollTrigger.refresh(); } // Kill all ScrollTriggers when leaving a page function killScrollTriggers() { ScrollTrigger.getAll().forEach(trigger => trigger.kill()); } // Barba.js initialization barba.init({ preventRunning: true, transitions: [ // Transition from Home to Project page { sync: true, from: { namespace: ["home-page"] }, leave(data) { return gsap.to(data.current.container, { opacity: 0, scale: 0.9, duration: 0.8, ease: "power2.inOut" }); }, enter(data) { $(data.next.container).addClass("fixed"); return gsap.fromTo( data.next.container, { opacity: 0, scale: 0.9 }, { opacity: 1, scale: 1, duration: 0.8, ease: "power2.inOut", onComplete: () => { $(window).scrollTop(0); $(data.next.container).removeClass("fixed"); resetWebflow(data); // Reset Webflow interactions after the page switch initGSAP(); // Initialize GSAP animations after the page switch } } ); } }, // Transition from Project page back to Home { sync: true, from: { namespace: ["project-page"] }, leave(data) { killScrollTriggers(); // Stop ScrollTrigger when leaving the page return gsap.to(data.current.container, { opacity: 0, scale: 0.9, duration: 0.8, ease: "power2.inOut" }); }, enter(data) { $(data.next.container).addClass("fixed"); return gsap.fromTo( data.next.container, { opacity: 0, scale: 0.9 }, { opacity: 1, scale: 1, duration: 0.8, ease: "power2.inOut", onComplete: () => { $(window).scrollTop(0); $(data.next.container).removeClass("fixed"); resetWebflow(data); // Reset Webflow interactions after the page switch initGSAP(); // Initialize GSAP animations after the page switch } } ); } } ] }); // Function to reset Webflow interactions after a page switch function resetWebflow(data) { let parser = new DOMParser(); let dom = parser.parseFromString(data.next.html, "text/html"); let webflowPageId = $(dom).find("html").attr("data-wf-page"); $("html").attr("data-wf-page", webflowPageId); window.Webflow && window.Webflow.destroy(); window.Webflow && window.Webflow.ready(); window.Webflow && window.Webflow.require("ix2").init(); } // Use Barba.js hooks to re-initialize GSAP after page transitions barba.hooks.afterEnter((data) => { initGSAP(); // Start GSAP animations after the page switch }); </script> What works: • Barba.js transitions work fine, both in and out animations are smooth. • Image animations (opacity and position changes) run as expected after the page transitions. • Webflow interactions reset correctly after the page transitions. What doesn’t work: • SplitText animations are not visible. The code runs, I can see the logs (SplitText successfully loaded and split), but the text remains hidden or not animated. I’ve tried different things, like setting the initial visibility and opacity with GSAP, but nothing seems to make the text visible. What I need help with: • I’m not sure if it’s an issue with how Barba.js handles the page transition or if I’m missing something about how SplitText should be initialized and animated. • Is there anything I should be aware of regarding timing, DOM readiness, or visibility when using SplitText with Barba.js? • Any insights from the GSAP pros on what I might be missing or doing wrong would be hugely appreciated!

Hi guys! I'm learning GSAP a few months, with the help of community, this is my first work using GSAP, in progress yet. Thanks all for help! And i have another question, about page transitions, shared element transitions between pages. See website reference at link: https://alfacharlie.co/ See the effect of transitions between pages, the softness the animations. I used the barba.js in html + css and it worked, but not working fine in wordpress, someone to help me achieve page transitions in wordpress site?

Hi guys I am new to Greensock and recently I have created a template website using both gsap and barba js. The full code can be found in https://github.com/kitsonchan/template_architecture and you can also view the website directly here https://kitsonchan.github.io/template_architecture/. So now the problem that I have been struggling with is the timeline that was using scrolltrigger. In both of my page Ihave a timeline called tlStage1 and tlStage2. The tlStage1 works completely fine at all conditions but I don't know why tlStage2 only works when you refresh the page. I am not sure if the issue is related to barba js lol so i decide to ask here. Thanks!

Hi everyone, I'm trying to implement some simple scrollTriggered timelines to a project that's using Barba.js for page transitions and locomotive scroll (with [data-scroll-container] as the ScrollTrigger Proxy). I've managed to get it working on first page load however after transitioning to another page the same timelines appear very janky. If you check teh codepen demo you'll see that images scale smoothly on the index but not the about page. I've tried killing all ScrollTrigger instances with Barbas beforeEnter hook but I think I must be doing something wrong when re-initializing locomotive scroll. If anybody has any experience in using these libraries together and has any advice that would be great! Many thanks https://codepen.io/mulegoat/project/editor/XvJVNP