Animate paragraph by line

Is there a way in webflow to use a paragraph that reads as one paragraph block for SEO but animates line by line.

Here’s an example of that hero treatment:

Hey @caleb,

Yes, absolutely. You can have many <span> elements inside the <p> element, and have animations directly on them.

1 Like

Thanks! I’ve actually tried the “span text” technique but when I animate a page load, I can’t move the text, just the entire paragraph. Do you have any examples in webflow?

You need to give your span display:inline-block

1 Like

That did it! Thank you so much

One more for you - in the above example, there is a div mask. Is that possible to do on the function?

Possible, but not as a single paragraph.
Take a look here:

Hi there I am trying to accomplish this effect as well. Where would I put display:inline-block ?

That depends on your structure… could you provide a read-only link?

Do you have any idea how this could be altered to be responsive though?

I’m looking to create the same effect for a site I’m working on, and wrapping each line in a <span> was my first idea as well.

However, when shrinking down to smaller breakpoints, a 1-line span could become a 2 or 3-line span and thus stop the ‘line-by-line’ animation from working as intended.


Was thinking the same!

1 Like