Animated Gradient

[filippobarcellos]

Hello. I've been struggling with animations. How to achieve an animation like this one? Thanks

[Bayramito]

If you only need this as a background use Lottie instead.

https://lottiefiles.com/search?q=gradient%20background&category=animations

[dentemm]

I have the same question about animating gradients. I'd like to animate a radial gradient over an image to get a spotlight effect. I'm able to animate a circle over the image, but if I use the same technique to try to animate a gradient nothing changes. The gradient just remains in its initial position.

Update:
Found it! Apparently we need to use useComputedValue for this!

[wcandillon]

yes that's correct

[denizyesilirmak]

It's a very old thread, maybe you can still help me. I couldn't manage to animate the gradient color in any way. I have a Rect filled with RadialGradient. I want to animate stop colors:

<Rect x={0} y={0} width={width} height={170}>
    <RadialGradient
     c={vec(width / 2, 200)}
     r={170}
     rx={width / 2}
     colors={['cyan', 'blue']}
     />
</Rect>

Thank you.

[wcandillon]

this might help: https://shopify.github.io/react-native-skia/docs/animations/reanimated#hello-world (see the node on animating colors).