Streaming live at 10am (PST)

Adding Text Background Clipping to a separate div element so it can be animated

Hello.

I have been trying to create a gradient text effect that animates as the page scrolls.
I have figured out how to use a background gradient and clip the text to it. However I can’t move that Background Gradient on scroll because the interactions don’t let us add animation to background gradients, only background colours.

Is there any way to add the gradient to a separate div, and then clip that div to the text?
The idea here would be that I could animate the Div on scroll so that the gradient moves/changes but it would still be clipped to the text.

Anybody have any ideas?
Thanks.

1 Like