Streaming live at 10am (PST)

Change background position on scroll

#1

Hi, is there a way to change background position on an element when scroll into view?

I have a < span > within a paragraph of text and I want to have a text highlight effect when people scroll into view. I know I can just animate the background color but I want the background highlight to grow from left to right.

text%20example

So when people scroll into view of this paragraph, the text highlights from left to right. I have played around transitions/animation panel but couldn’t figure out a way to do this. Any help is much appreciated!

1 Like
#2

Hey @Samuel_Shen

Can you share your read-only link?

Piter :webflow_heart:

#3

Hi, @PiterDimitrov

Here is the read-only link

The instance is in the project page, the paragraph of text under the first H1.

Again, all I am trying to do is to animate the text inside the < span > tag. When users scroll into view, the text background color grows from left to right. I am also trying to replicate this into many instances.

1 Like
#4

Hmm Ineed to try some things because you can’t insert a div inside a span. I will share here