360 degree rotation of gradient

[Jake Snellin]

Hi there!

 

Hope you're well. I've made a website here https://ecstaticdancebrighton.co.uk/ . The sun is a 3d sphere with a linear gradient rotating 360 degrees on a loop. I made the animation in Spline. It feels a little unnecessary to have a 3d animation for this. I'm using a placeholder image for the 2 to 3 seconds it takes for the animation to fully load. It also glitches from time to time - not appearing at all. I'd ideally like to use gsap for this animation instead and simplify, however I can't seem to wrap my head around the best approach to animate a rotating gradient. I also couldn't find much in the forum about this. Any help pointing me in the right direction would be great. I've tried targeting the linear gradient and animating the stop values, but it's not looking as I'd hope. I can provide a minimal demo of what I've tried so far if helpful? Look forward to hearing from you!

 

Thanks,

Jake

[Rodrigo]

Hi,

 

Indeed a minimal demo would be ideal. As far as I can tell the gradient animation is being handled by THREEJS, right? You could definitely handle that in GSAP, but it'll depend on how you approach that. Certainly rendering that in WebGL posts the challenge of adapting what particular object you're animating, nothing more, and that shouldn't be to complex neither.

 

Happy Tweening!