How would you animate individual rows of text?

I’m in the process of redesigning my portfolio and was wondering if it was possible to animate individual rows of text…

As you can see in the preview link, I have the large intro headline fading in from the bottom. What I would like to do is have each row of text animate individually, creating a staggered effect.

I would just wrap each line in a **span and then animate each of those individually, but that creates problems when the text gets wrapped, as there may be a word that get’s bumped down to the second line that is still animated in coordination with the first row.

I imagine you would need to some JS to accomplish this effect? Can anyone help me out?

Thanks!


Here is my site Read-Only: LINK

Why wouldn’t you simply add each line in a separate div inside of a parent div?

For the same reason that I wouldn’t wrap the lines in a span… (just noticed the type there in the 3rd paragraph). Once those lines of text wrap at a certain viewport, that 1 line div would become 2 lines, and so on.

Gotcha. Okay, are you wanting the “Dribble, Behance” text to stay on the right on all device sizes? Or, will that column be removed on mobile landscape and portrait?

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.