Imarc Posted October 3, 2021 Share Posted October 3, 2021 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 More sharing options...
OSUblake Posted October 3, 2021 Share Posted October 3, 2021 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 3 Link to comment Share on other sites More sharing options...
Imarc Posted October 3, 2021 Author Share Posted October 3, 2021 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 More sharing options...
Cassie Posted October 3, 2021 Share Posted October 3, 2021 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. 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now