zskev Posted April 5 Share Posted April 5 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted April 5 Share Posted April 5 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now