Scale a Circle with a Radial Gradient Background

[zskev]

Hi everyone.

 

Hope you are all well.

 

I am having a little issue that I can't seem to rectify. I want to scale a circle that has a radial gradient background. If you look at the codepen I created, as it scales in, there is a harsh difference between the gradient colour and the white background. Interestingly on the codepen it just does it with the top and bottom, but on my app its doing it on the sides as well, so at first it looks like a rectangle scaling in.

 

I know it can be done with an image, but I would rather, if possible, keep it to css.

 

The look and feel I am going for is replicated from here: https://antara.studio/ - if you scroll down to the section that says: bold, elevated, and intentional. As you scroll into that section, the background circle scales in. Granted they are using an image, if possible, I would prefer to try keep with CSS.

 

Thanks,

Kevin

See the Pen xxeYRWd by zs-kev (@zs-kev) on CodePen

[Rodrigo]

Hi @zskev and welcome to the GSAP Forums!

 

Yeah the problem here is that the DOM elements are boxes(squares/rectangles) so scaling them will result in a box of different size. Maybe you could try using a circular clip path:

https://bennettfeely.com/clippy/

 

Here is a simple demo animating a circular clip path with GSAP:

See the Pen zYbYjBo by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!