Text animation while scrolling

Design help Animations & Interactions
1

Hi guys, I’m trying to create an animation when the user scrolls, where the the text disperses in different directions.

I thought this would be pretty simple but as you’ll see if you watch this video, the text elements aren’t working the way I thought they would.

Any help would be much appreciated! :v:

Rachel

Here is my public share link: Webflow - client1

2

From what I’ve tested, this won’t work while trying to move span-wrapped text within the same heading element. Possible I’m wrong tho and I just don’t know wtf I’m talking about :slight_smile:

I’d approach it with each word being an individual text element, positioned using inline blocks to make it appear as a single headline. The downside is that it wouldn’t have the H1 designation.

3

Thanks @Port_of_Folio!

Ahh I see, if that’s how it’d be done then I’ll leave it, as I don’t want to remove the H1 tag, plus for screen readers it’ll be annoying if they’re all split into individual elements rather than as a sentence.

Thanks for trying!