Streaming live at 10am (PST)

For Hire: Text Reveal on Scroll

Hello -

I’m looking to have a similar slide up & fade in horizontal effect like the attached video.

com-video-to-gif

Is this possible within Webflow?

Gradient div that is opaque on the right end (with the colour of background) and transparent on the left end that is moving to the right on each text line thus revealing the letters.

1 Like

Hi Kyle,

Are you looking to hire someone, to do this for you?
If yes, please check PM.

Regards,
Sofia

Well. That is definitely not the way they did here. And that really sounds like a horrible plan for a fluid design. :slight_smile:

1 Like

Well, since the question was “within Webflow” then it doesn’t matter how it was done in the example. Most likely some js library.

Why tho?

They are probably using Splitting.js for this. That is also possible to use in Webflow. Takes a small bit of learning, i know. But in the long run, it’s better learning it now, than doing a half fix. And Splitting.js is really easy to use after all.

Because if any of your lines breaks, then your kind of f*cked.

Sure, using any js library in WF is possible.

Well, since the reveal is quite fast you may or may not notice in the end. Anyway it is always fun to try simple solutions instead of resorting to side libs :smiley:

Well. Lets not argue about that. Still friends? :hugs:

1 Like

Check out this clonable project:

1 Like

Thanks. Have used a similar setup previously, but words were breaking in awkward ways.

I guess that’s because text is being treated as separate symbols rather than words with this setup breaking the words unexpectedly. You may use vw/vh as font size units to avoid line breaks. This may work depending on your use case.