SplitText Animation Breaking on Page load inconsistently

[SirThompson]

Hey All. I am having an issue with SplitText on page load.

In the codepen demo is a basic version of what I have on my site. Sometimes in Chrome, SplitText loads too early and the text animation breaks on page load. It seems to happen mostly when the animated text is already visible immediately, and the result is that the text gets stuck instead of animating properly.

The weird thing is that its not on every chrome profile. If I use my personal one it works fine, on Incognito too. If I clear sessionStorage, cookies and caches it still works. But if I send the link to my mate and he looks at it on his chrome it breaks and even refreshing the page does not resolve it. I have also attached an image of it stuck. Every time I test, I make sure to clear cookies, caches etc. I have also made sure his profile has no throttling or anything like that. 

I'm not sure if it is to do with the ScrollTrigger using onEnter() to call the animation or if it is something to do with autoSplit. The thing that bugs me is I can't seem to get it to fail on my chrome tabs, only certain ones. I have tried making the tweens fromTo()s changing the load detection from document.addEventListener("DOMContentLoaded", () => {}; to a fonts ready then. I tried to make only the animations whose triggers are already past the trigger point use a different SplitText and ScrollTrigger.

I can't seem to work out what the issue is and why it is so inconsistent as all the other animations on the page work fine, unless you reload the page with an animation past its trigger point (on specific chrome profiles).

Any help would be much appreciated!

See the Pen yyabLXP by Tommy-Dougan (@Tommy-Dougan) on CodePen.

[Cassie]

Hey! This may be to do with your setup.

You were targeting classes inside your onSplit callback, you actually want to be targeting the lines and masks specific to that actual split text instance.

See the Pen emdyGvK?editors=0011 by GreenSock (@GreenSock) on CodePen.

Adding the scrollTrigger in the timeline is more of a solid pattern too, you might end up with a stale reference the way you've set it up. I added scrub to this just so you can see it working, but you can swop it out to once true.

[mvaneijgen]

Welp @Cassie had the same idea

Hi @SirThompson welcome to the forum!

 

Personally I would make ScrollTrigger part of the timeline and have it also be inside the onSplit, so that everything that is new refreshes the whole animatio dn including the ScrollTrigger logic. 

 

Maybe this solves your issue 🤷 but same as you I can't seem to get the animation to fail. I would pay close attention to the console when something fails so that might give you a clue to what is happening. Hope it helps and happy tweening! 

 

See the Pen bNwaoKr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Cassie]

My guess is that as your setup was a bit fragile, you may have ended up with stale references if the font loaded a little late or autoSplit was called due to a minor DOM shift.

[Cassie]

Nice little defaults addition @mvaneijgen 💚

[SirThompson]

Hey Everyone, Appreciate the responses! 

I will try out these solutions and get back to you. I think it may be something to do with how the timelines get executed per section on the site (My Codepen example was pretty watered down)

As soon as something works I'll get back to you guys!