Splittext weird breaks - GSAP + Barba

[vladdesign 4 Likes (Newbie)]

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

[Cassie 3,755 Likes (Superhero)]

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. 

[limbo 32 Likes (Newbie)]

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

}

 

Then:

 

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

    }]

}); // barba.init

[vladdesign 4 Likes (Newbie)]

Tnx for answers, i'll check it out.