Error setting SplitText with content flashing before playing

[Matt K 1 Likes (Newbie)]

Hello everyone,

 

I've been trying to set the SplitText animation for a bit now, but I've run into an issue. When I try to animate the text with chars and chars2 in the target class or id, for the .from sections, the animation doesn't work.  When I reference the classes directly ".txtMain" and ".txtMain2" it works. The result is a little different, but it works. I tried adding the autoAlpha after the type in the mySplitText variable as well, but nothing changed.  In the CodePen, only the button loads since I reference the class directly and I don't need the SplitText functionality.

 

The video I included shows what I created without the init function wrapped around the timeline, the visibility commented out, and the desired result.  However, when I click on each page of my site, it flashes and then plays the animation. So I'm trying fix the FOUC. Perhaps there's a better way to reference it since it's neither a class or id. But any direction or suggestions would be appreciated.

 

 

 

 

 

See the Pen JjwEjpM by mattk1500 (@mattk1500) on CodePen

[Trapti 211 Likes (Specialist)]

Hi, 

If I understood the problem right then this is the problem. 

In the given code: 

- In CSS the visibility is set to hidden to the main class. But in Js its never set to visible.

- From tween been used from Autoalpha 0 which is making them hidden initially.  And this has been applied to the individual chars not to the parent. 

These two things were messing. 

Solution:

- In CSS add "visibility" and "opacity" to "hidden" and "0" to the ".txtMain" and ".txtMain2". 

- Using GSAP ".set" make it visible using "autoalpha" to the ".txtMain" and ".txtMain2".
Here is the code. 

See the Pen eYbgpEd by tripti1410 (@tripti1410) on CodePen

 

 

Hope it helped! 

 

 

 

 

[Matt K 1 Likes (Newbie)]

Hi Trapti,

 

I'm sorry for the delay.  Thank you so much!  Yes, that worked!  I didn't realize that I needed to set it.  I thought since I was using a .from that it would automatically start from 0 and go to 1 and that that was setting it. I didn't think to add both visibility and opacity either. Thanks again!