Streaming live at 10am (PST)

Animated Gradient CSS

Hello @rileyrichter, I’m looking to create a gradient background animation to create a text shine reflection effect. I would usually try to achieve this by fixing the gradient background position, however I have no idea how to do this. I’m taking the reference from https://www.apple.com/apple-card/. When scrolling gradient stays fixed and creates a text shine effect. Please find attached what I’m trying to achieve:

I’ve been trying to figure out how to animate the background for 2 whole days. Thank you so much.

Hey Aaron, where is this being animated? I can’t see any interactions in the panel?

Thanks

Alistair

Hey @Alistair_Gallop this project was built using “Legacy interactions”

Hi @aaronocampo I’m trying to replicate this but I don’t see how you animated it. Could you please explain

The animation was made with Interactions v1.

If you go to the interactions panel and switch the toggle at the very bottom you’ll see the previous interactions panel and then you can see how I made it.

If you replicate what I did there with IX2 you should be able to get the same result.

Thanks for your reply. Didn’t realize we could view legacy interactions :blush: