Jump to content
Search Community

Error setting SplitText with content flashing before playing

Emcom Technology test
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.
  • Create New...