mattdown Posted May 19, 2021 Share Posted May 19, 2021 I've got this codepen that where text is split into lines and then each line is faded in. The dotted yellow lines highlight the '.line' class that splittext applies when it splits the words etc. When you view this in a large browser window and click 'run animation' it behaves as intended and you can see that the yellow dotted outlines don't contain more than 1 line of text. But, if you then resize the browser and make the window more narrow (<768px for example), the words start to wrap within the yellow dotted lines and the effect of fading in one line at a time is lost. I think I need to revert() on resize somehow to recalculate how new lines are applied but I don't know how I could apply that to my existing code. Any help would be really appreaciated. Thanks Matt See the Pen qBrNbJM by mattdown2478910 (@mattdown2478910) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted May 19, 2021 Solution Share Posted May 19, 2021 How about this? See the Pen ef88f44a9b29289c6b602ac494a44093 by osublake (@osublake) on CodePen 2 Link to comment Share on other sites More sharing options...
mattdown Posted May 19, 2021 Author Share Posted May 19, 2021 That's exactly what I was after. Thanks so much. Link to comment Share on other sites More sharing options...
mattdown Posted May 19, 2021 Author Share Posted May 19, 2021 Could I ask for another opinion on something please OSUblake? The splittext animation timeline needs to be used as part of another main timeline where a block fades in and out, then the text animation happens, then another block fades in and out before it all repeats itself. All is fine if the user starts with a wide browser but if they then resize down to a narrow browser, the main timeline isn't taking into account the extra time the text timeline needs to finish animating before the 2nd block appears. Can anything be done to fix this? See the Pen BaWQZaQ by mattdown2478910 (@mattdown2478910) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted May 19, 2021 Share Posted May 19, 2021 Sure, in that case I would just do everything inside that resize function. See the Pen 678133da2a5dfa306f2a08352ab76263 by osublake (@osublake) on CodePen 1 1 Link to comment Share on other sites More sharing options...
mattdown Posted May 19, 2021 Author Share Posted May 19, 2021 Wow. Thanks. That's exactly what it needed. 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