Jump to content
Search Community

Splittext weird breaks - GSAP + Barba

vladdesign test
Moderator Tag

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

1022437027_Screenshot2021-08-17at13_06_32.png.47ad33228b9c1fa5fd094c59ecda8fd3.png

 

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

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

  • 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.
×
×
  • Create New...