Problem realizing Pixel Geek's text color change on scroll effect

Design help Animations & Interactions
#1

Hi Webflower!

I’m trying to follow Pixel Geek’s tutorial on changing text color on scroll (How to Webflow: Changing text color on scroll - Tutorial (2019) - YouTube, which was from 2019). But the text on top won’t change accordingly to the background image.

The initial state:

WX20220410-002346@2x
WX20220410-002346@2x1536×990 32.6 KB

When scrolling:

22
221476×1036 35.2 KB

I guess maybe it’s because the [overflow: hidden] attribute cut the white text off?

I did exactly the same thing as the tutorial but can’t achieve the same effect. Does anyone know why and could you please help me here? Thank you in advance! :slight_smile:

Here is my public share link: Webflow - Copy of Proposal 2A

#2

Hi Dora!
Remove the overflow hidden from the white text and instead set it to the image holder :slight_smile:

#3

Thank you a looot, Maria!!! Now it works perfectly. You are the best! :pray:t2:

1 Like