Slide up to reveal multiple lines of text

Design help Animations & Interactions
1

Hey all,

I’m trying to come up with a way to reveal multiple lines of text with a slide up effect. I have been hacking around with Webflow interactions for about an hour trying to recreate something like this. All to no avail, although I came close with some strategically placed divs + interactions.

Just wondering if anyone might have a solution to this. I would like to reveal the multiple lines of text when scrolled into view. If I split up the paragraph word by word, each placed in a div, and each div positioned as inline, I think I can achieve what I am looking for. However, this isn’t a good option for SEO :frowning:

If anyone has an idea, please let me know.

I just made this read-only link for anyone willing to play around with it to help me find a solution.

Thank you!

PS - There is similar post to this, but it’s ~ 11 months old with no replies.

2

Hello.
Its a little too much to explain in text only. So I made a screencast.
https://www.screencast.com/t/oPHzwQhVCVJ

3

Thanks for the screencast! Unfortunately, this does not solve my problem. For SEO reasons, I can’t split up my text into multiple headings.

4

Hi @myonke.

Maybe you can do it with text span?
Break the lines into different span, and add interaction to them?

PS: I’m not at the pc, so I can’t test right now. Just an idea.

5

@Andre_Pascal_Fuentes Thanks for the response! I did play around with text spans, but there were a couple problems:

  1. if the screen gets smaller, the span would go onto 2 lines, and then that span would animate together instead of line by line.

  2. But more importantly, there’s no container to set to overflow:hidden for me to reveal the spanned text from.

Maybe I am missing something! if you get the chance, please take a look when you’re back at the computer. Thanks again!

6

  1. You can set the font size to VW or VH instead of px. It will cause the font to resize with the size of the window, and don’t go two lines.

  2. Maybe if you put divs with background white color, with z-index above the text, you can create this effect.

7

Your #2 was actually the “hacky” way I almost accomplished this. It does actually get the job done, but, it involved a LOT of divs and positioning haha. I was kind of looking for a less complicated way to accomplish it. I’m not sure a clean way is possible in Webflow.

8

I guess it’s not possible then… I can’t think another way to do this, only with custom code.

9

Yeah, I ended up giving up on a native solution. I’m just going to use custom code :frowning:

10

Did you achieve this effect.
Its called Split text effect. Since i dont how to use code. Unable to achieve this effect. Did you get any solution?