Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

combining SplitText array items together in a stagger?

Recommended Posts

I have some HTML constraints due to some CMS stuff.


That said, after using SplitText, I'd like to ensure the periods in this heading to animate in at the same time as the word preceding it (e.g. world. should animate in as one word). As of now, they animate separately due to SplitText.


Bonus: I wanted to avoid flash of unstyled content, so I used autoAlpha on the parent tag. Does this seems appropriate in this context? Thanks so much.



See the Pen oNwRBZo by marcelmoreau (@marcelmoreau) on CodePen

Link to comment
Share on other sites

Welcome to forums @Imarc


To avoid FOUC, it's better to set the opacity to 0 in your CSS, and then animate it to 1 with GSAP.


Not sure what your constraints are, but if you don't have have control over the <span>.</span>, you could just dynamically replace those spans with a period.


heading.innerHTML = heading.innerHTML.replace(/<span>.<\/span>/g, ".")

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




  • Like 3
Link to comment
Share on other sites

Thanks for the FOUC info.


Blah, I failed to also describe that these <span>s have inline colors associated with them that I need to keep. I have updated the codepen to reflect this.

Link to comment
Share on other sites

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

Hmm. Well you don't have to use a stagger, you could target specific items in the array? Feels a bit fragile though. I'd probably rather get rid of the spans and add coloured full stops with pseudo elements.

  • Like 4
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.