Streaming live at 10am (PST)

Change font color on alignment - sticky

Hi everybody,

I’m trying to come up with a way for ‘types of fruit’ text to turn white when it aligns with the sticky text on the left.

Any ideas?

sticky-text-rolling-feature.webflow.io/


Here is my site Read-Only: [https://preview.webflow.com/preview/sticky-text-rolling-feature?utm_medium=preview_link&utm_source=designer&utm_content=sticky-text-rolling-feature&preview=212b701d0bbc5e80bf88a4f7c9d8f7c2&mode=preview1
(how to share your site Read-Only link)

I’m sure @PixelGeek will know how to do this one :grinning:

Nelson is the king! I was hoping to figure it out using a similar method to his ‘Change text color on scroll’ video last week.

Fingers crossed.

What about a “While scrolling into view” interaction on the main text container ?

0% apple is white, 10% apple is grey.
10% pears is white, 20% pears is grey.
20% bananas is white, 30% banana is grey.

Etc.

(in the case there are ten items we’d use an increment of 10% but that’s obviously 100/total number of items to animate)

1 Like