Jump to content
Search Community

Splittext revert?

mattdown test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

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

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