Streaming live at 10am (PST)

Text change on scroll over


#1

I’m trying to accomplish an effect where the text is changed on scroll over. To better explain, see GIF below taken from WIX website. I know how to do it with background images (set section background image to “cover”) but how to accomplish this effect with only TEXT?

So, instead of that background changing, it will, on scroll, change one text to the other.

Thanks for any thought of help (even if it did not even reach the reply button!

(GIF set to repeat 3 times)
scroll


#2

Hey @UpperCity

Could you clarify for me if what you trying to do is

Something like this:
http://text-changed-on-scroll.webflow.io/

Or like this:
http://text-changed-on-scroll.webflow.io/covering-the-text

Or another thing completely different.


#3

Gilson! First: Beautiful this sure is, so quick is the reply with clear examples.

Now on to the dilemma! Your examples are very close indeed, but I want the effect to be instantly when the container gets over the text.

I attach a picture and hope it serves enough as an example. Else I will create the effect with some PS animation.


#4

Here is the effect created in Webflow - only - it is done by pictures and not text.


#5

Hey @UpperCity

Check the live example:
http://text-changed-on-scroll.webflow.io/mask

I made the example you needed on the check the page Mask:
https://preview.webflow.com/preview/text-changed-on-scroll?utm_source=text-changed-on-scroll&preview=9b436cfd86033289c33da42063e552fb

I left the other examples there aswell, so you can reverse engineer all of them.


#6

That is neat! But I’m going to be a hassle here. The page will mainly be for reading. And text that moves gets tough to read, if more than a few headers.

If made by triggers, I suppose there will always be a delay (even when set to 0).

But maybe it is possible to combine what you have done with sticky. I’ll give it a shot.


#8

Alright, this is way above my skill level. I only entangle myself in confusions.
I’ll have to come back to this later.

If you figure out a way to solve it before I do, you have my love.


#9

I can work with you with contract, send me a private message if you want it.