Animate paragraph by line

Design help Animations & Interactions
1

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: https://www.aristidebenoist.com/

2

Hey @caleb,

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

1 Like
3

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?

4

You need to give your span display:inline-block

1 Like
5

That did it! Thank you so much

6

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

7

Possible, but not as a single paragraph.
Take a look here:
https://webflow.com/website/Text-Animation?s=text-animation-1

8

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

9

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

10

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.

4 Likes
11

Was thinking the same!

1 Like