GSAP SplitText Not Visible After Barba.js Page Transition - Need Help

[Cyri12]

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. 

 

 

<!-- 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!

[Rodrigo]

Hi,

 

Unfortunately there isn't a lot we can do without a minimal demo that clearly illustrates the issue you're having.

 

What I could suggest you is to revert those SplitText instances on route changes. You can actually group all the ScrollTrigger, SplitTexts and any other GSAP instance in it (Tween/Timeline/ScrollTrigger/ScrollSmoother/Draggable, etc.) by adding them inside a GSAP Context instance's scope and you can just revert that GSAP Context instance instead of looping through all the instances you're created (like you're doing now):

https://gsap.com/docs/v3/GSAP/gsap.context()

 

Something like this

let ctx;

function initGSAP() {
  ctx = gsap.context(() => {
    // Create all your GSAP Instances in here including the SplitText one
  });
};

barba.init({
  transitions: [
    {
      sync: true,
      from: { namespace: ["project-page"] },
      leave(data) {
        // REVERT EVERYTHING WHEN LEAVING THE PAGE
        ctx && ctx.revert();        
        // Other leave stuff
      },
    },
  ],
});

Give that a try and let us know how it works.

 

Hopefully this helps

Happy Tweening!