SplitText does not split words correctly

[DanielLav]

Hello GSAP community! I'm creating a small quiz and I'm having a problem with word splitting during the entry animation (for view this just click to "Open modal" button).

 

I am attaching a minimal demo showing my problem:

 

Here you can see that words "your business" appears without separating the words. I also need to revert the animation after it's done so I can then assign the active class to other text.

 

I spent 2 days trying to find a solution (testing replacing my css code and trying to use functions from the ScrollTrigger documentation).

 

Please help me find a solution. I will be very grateful for any help!

See the Pen zYQxNoa by ProjectDCL (@ProjectDCL) on CodePen

[Rodrigo]

Hi,

 

The issue is definitely not related to GSAP but something else in your setup (most likely CSS).

 

I forked and simplified your demo to work with a click event in the window with the text being visible at all times, when you click the SplitText instance is created then animated and when the animation is completed, the SplitText is reverted:

See the Pen KKLwQZp by GreenSock (@GreenSock) on CodePen

 

As you can see everything is working as expected. Maybe going from display none to flex could be causing this, but as you can see is definitely not a problem with the way GSAP and SplitText are working.

 

Hopefully this helps.

Happy Tweening!

[DanielLav]

Hello! These days I've spent extra time trying to change my css to make SplitText work correctly.

 

I removed the display: none css property for the title as a test (although I will definitely need it due to the specifics of my animation, where I will change the titles).

 

The problem remains. If you look in the inspector, SplitText doesn't even split my text on a line. I suspect that this is either some kind of SplitText bug, or I am writing my GSAP code incorrectly.

 

Can you look at what's wrong again? I spent several days trying to find a solution

 

I attach updated codepen where I remove display: none in css:

[GreenSock]

From the docs: 

Quote

Splitting nested elements by "lines" is not supported (here is a workaround).

There is a helper function that can help in that situation. You also need to make sure the elements are in the document flow so that calculations can be done correctly, but you had display: none on the parent. So you could toggle that for the split. 

 

See the Pen RwmrWPy?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Better? 

[DanielLav]

12 hours ago, GreenSock said:

Из документов: 

Существует вспомогательная функция , которая может помочь в этой ситуации. Вам также необходимо убедиться, что элементы находятся в потоке документов, чтобы вычисления могли выполняться правильно, но у вас было display: none в родительском элементе. Таким образом, вы можете переключить это на разделение. 

 

 

 

 

Лучше? 

Thank you, Jack! This definitely works better. But I still encounter a bug.

For example, I didn't change your code at all, but I changed the text from:

<div>Tell us<span class="text-gradient"> more</span> about your business</div>

to:

<div>Where is your<span class="text-gradient"> business</span> based?</div>

And damn, now it splits the text into two lines, but it doesn't do it correctly. I am attaching my codepen where you can see this:

See the Pen xxNZZXm by ProjectDCL (@ProjectDCL) on CodePen

 

Also if you add other text:

<div><span class="text-gradient">Additional</span> information</div>

With this approach, the text inside the span is wrapped in two divs. This isn't exactly a problem from a styling point of view, but this behavior doesn't exist when adding other text. And truly, when I switch between my slides in project sometimes (in 10-15% I still see how some words stick together).

 

I just don't understand why this happens. I use SplitText on many projects and have never seen such a problem.

You are doing amazing things, maybe I am doing something wrong.

 

Will you have opportunity to check again please?