Jump to content
Search Community

combining SplitText array items together in a stagger?

Imarc test
Moderator Tag

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

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