Jim Tim Posted June 1, 2023 Share Posted June 1, 2023 why I'm not getting word-by-word animation? in this case, I want to split the word as present as in the dom so I used but the splitText is not splitting the dom into words instead it splits into lines. where am I going wrong kindly help me. See the Pen BaqgPaV by dajeme7838- (@dajeme7838-) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted June 1, 2023 Share Posted June 1, 2023 Hi @Jim Tim I don't know why your text was build up with and there were a lot of inline styles set on the blockquote block, also your blockquote text was wrapped in a <p> tag. If I just copy your text to a new clean blockquote everything works as expected. Hope it helps and happy tweening! See the Pen yLRdxMM by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
Jim Tim Posted June 1, 2023 Author Share Posted June 1, 2023 hi @mvaneijgen I expect the output to look like this. there should be multiple space in my scenario that's why I use Link to comment Share on other sites More sharing options...
Rodrigo Posted June 1, 2023 Share Posted June 1, 2023 Hi, I don't think there is need for all that there, maybe just a different HTML could be enough: <blockquote style="font-size: 18.21px; width: 305.735px; height: 55.8393px; font-style: normal; font-family: Roboto-Regular, gfs; text-decoration: none; transform: translate(144.927px, 0.663px); max-width: calc(100% - 22.7625px); text-align: center; text-transform: none; background: rgb(0, 0, 0); color: rgb(255, 255, 255); letter-spacing: 0em; line-height: 1.2; word-break: break-word; padding: 6px;"> <p class="sc-bdxVC lcokJp"> tom hello hello there how are you<br>rom<span class="right">hello</span> </p> </blockquote> <br> With this CSS: .right { margin-left: 25%; } Here is a fork of your codepen using the latest version of GSAP and SplitText as well: See the Pen jOejgYV by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 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