Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Splittext weird breaks - GSAP + Barba

Recommended Posts

Hi everyone,


So i'm using gsap splittext plugin to split sentence into words and lines and then animating words.

Everything works fine on first load of a page but when i'm navigating to different page and then get back something weird happens and sentence breaks only on last word. We are using gsap with barba js.


Here is the demo of a problem, also i tried to replicate problem on codepen but it is lot of work to integrate barba there to make it more accurate.


Here is how it looks when it's inspected



Sometimes it works as expected, but most of the time it breaks and breaks

See the Pen poPmKbN by Djarmito (@Djarmito) on CodePen

Link to comment
Share on other sites

Hi there @vladdesign,

It's hard to debug without a look at the barba.js issue but it sounds like it's down to how barba.js is replacing/loading the DOM

This thread has links to a few previous forum posts that may prove useful -

Good luck with your project - I hope this helps. 

  • Like 3
Link to comment
Share on other sites

When working with GSAP and Barba I've found the best approach is to wrap your gsap timelines in functions and call them on barba transitions/views.


You tried that? Something like:


function pageTransition() {

// your splittext / other onload stuff





    // barba configurations here
    transitions: [{ // or 'views' depending on your use case
        async enter(data) {
            console.log('Transitions: Enter');


}); // barba.init

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.