Radial background changing (like a clock) with GSAP and ScrollTrigger

[maxwo]

Hi, 
I would like to make an animation on scroll but I have no idea how I can achieve this animation.

So I am writing to this forum to get a tip on how to approach this animation. Once I've implemented it, I'll be happy to share the code in this post. 

 

So what I would like to achieve is changing the background color of a div with a radial animation like in the pictures attached. The new color will expand from the center to 360 degrees, like a clock. 
Does someone have an idea how this could be done?

[mvaneijgen]

Hi @maxwo welcome to the forum!

 

Usually we ask for a minimal demo, if anyone who comes to the forums will just start listing a bunch of requirements there would be a lot of work for us and that is not something we can provide on these free forums! Having a minimal demo, even a not working one, will save us a lot of work and shows us you're willing to put in some effort to fix your own issue. That effort goes a long way on this forum! Keep that in mind for next time 😉

 

That said I'd set something up for my self creating this exact effect. You could do this of course in multiple ways, but check out the css conic-gradient() (https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient)

 

I'd just created the gradient I want and set up a CSS variable I will tween, in this case the degree of the gradient from 0deg to 360deg.

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

Hope it helps and happy tweening! 

 

See the Pen bGzwzYV by mvaneijgen (@mvaneijgen) on CodePen

[maxwo]

Hey @mvaneijgen 
Thanks for your hint with the conic-gradient! I wasn't aware that this existed. Great!

 

I didn't know the best way to start this animation, so I didn't have a demo.

I am aware that ideally I always have a first draft on Codepen. And will keep it in mind for next time. I also will share my scrollable version here when it is ready! Thanks!

[maxwo]

I now combined it with ScrollTrigger. I like it! Thanks again for sharing your idea @mvaneijgen.

 

See the Pen bGzgOWL by xj6652 (@xj6652) on CodePen