Change background position on scroll

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

Hey @Samuel_Shen

Can you share your read-only link?

Piter :webflow_heart:

Hi, @PeterDimitrov

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

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

Hi there. I am looking to do the same thing to a site I’m working on. Did you manage to find a way to get it to work? Would really appreciate the help. Thank you!

1 Like

@Samuel_Shen @PeterDimitrov Did you find a way to make it ?
Thanks !