Streaming live at 10am (PST)

How would you animate individual rows of text?


#1

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


#2

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


#3

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.


#4

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?


#5

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