Umberto Posted November 20, 2022 Share Posted November 20, 2022 Hi, I have a problem with SplitText. When the animation finishes and the text is loaded, using display: flex; justify-content: center; align-items: center; to center everything, I noticed a small click on the left. This doesn't happen if I don't enter: onComplete: () => { SplitLineOut.revert () SplitLine.revert () } There is a solution? Thanks See the Pen BaVRgKV by umberto (@umberto) on CodePen Link to comment Share on other sites More sharing options...
Trapti Posted November 20, 2022 Share Posted November 20, 2022 To me it looks fine you don't have to use "align-cc" class its already at center. The way text looks before the animation it is same after the animation. Text left align container center to the viewport. Or Am I missing someting? Link to comment Share on other sites More sharing options...
Umberto Posted November 20, 2022 Author Share Posted November 20, 2022 36 minutes ago, Trapti said: To me it looks fine you don't have to use "align-cc" class its already at center. The way text looks before the animation it is same after the animation. Text left align container center to the viewport. Or Am I missing someting? Thanks for the reply. The animation is centered and that's ok. If you notice, immediately after the animation finishes, the text moves and settles, creating a kind of flickering Link to comment Share on other sites More sharing options...
Trapti Posted November 20, 2022 Share Posted November 20, 2022 if you remove ".align-cc" class flickering will not be there. Link to comment Share on other sites More sharing options...
Umberto Posted November 20, 2022 Author Share Posted November 20, 2022 1 hour ago, Trapti said: if you remove ".align-cc" class flickering will not be there. Yes, I know this, but in my project it is necessary to center the texts with display flex. Any solution? Thanks Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 20, 2022 Solution Share Posted November 20, 2022 It's a layout/CSS issue. You could give the wrapper <div> a width of 100%: See the Pen ExRoEMM by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Umberto Posted November 21, 2022 Author Share Posted November 21, 2022 Now I understand how it works Thanks 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