Jump to content

Matt K

Error setting SplitText with content flashing before playing

Moderator Tag
Go to solution Solved by Trapti,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution


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. 


- 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! 





  • Like 4
Link to comment
Share on other sites

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!

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.