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!

Apologies in advance for the question that is more related to Barba.js than GSAP but you guys always point me in the right direction. I have researched different methods, but my JS knowledge is limited so I am not sure on what strategy to use. I want to do a simple page transition between two pages with separate JS files that have many GSAP timelines and event listeners. Ideally I would like to use the views / beforeEnter hook to re initialise my JS scripts, but I don't know how to do this. Or do I need to break up my JS files into functions and call them using hooks; I also have different JS files for mobile version so if it is possible to on page transition to load / run my JS files that would be ideal. barba.init({ views:[ { namespace: 'detail', beforeEnter(){ } } ], transitions: [ { name: 'general-transition-opacityfade', once({next}){ animationEnter(next.container) }, leave: ({current}) => animationLeave(current.container), enter({next}){ animationEnter(next.container); } }, { name: 'detail', to:{ namespace:['detail'] }, once({next}){ navigation1(next.container) }, leave: ({current}) => animationLeave(current.container), enter({next}){ navigation1(next.container); navin2(next.container); navin3(next.container); } } ] })

Hello im trying to get my barba.js to work and animate to different pages. When it goes to the second page it doesnt do anything. None of the buttons work either. Also I tried uploading to codepen but im not sure how to do multiple pages on there. here it is live and and git hub code

HI Folks! I've been trying (very unsuccessfully) to build a portfolio site with GSAP and Barba.js I initially built everything with CSS animations as per www.frontenddevelopment.com.au/dev, but failed to get it working yesterday, so I rebuilt it stripped down in a couple of hours today with GSAP. Unfortunately, despite following Barba's documentation, I cant seem to get it working and after 9 hours today I'm pretty frazzled. It may be something silly that I've overlooked due to being so tired. Obviously CodePen is not the right vehicle for a multipage site and I'm not enamoured with it enough to buy a full membership, I spent it on a Club Greensock membership instead. I know that this is a bit off topic, but GSAP and Barba.js is a formidable combination, so I'm hoping that someone can help me get this wireframe working! AS you can see form the site on my dev server, I'm also embedding canvas elements as well. Thanks so much! Andy :) about.html contact.html index.html projects.html main.js transitions.js main.css

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