Any ideas on how to recreate this "Growing Circles" effect?

Check it out, I’m looking to recreate the “growing circle” effect in the Our Impact section: https://wi.mit.edu/

I’ve seen a video of @PixelGeek’s where he creates something pretty similar, but it’s not exactly the solution I’m looking for. Does anyone have ideas on how to achieve this?

Hey, @MKDWebSolutions I’ve recreated the effect on webflow please do have a look and please mark this post as a solution if the problem is solved.

read-only

Published link

You can play with easings and size to make it more delightful.

Hope it helps :peace_symbol:

Hi Sachin,

Thanks for your help with this animation! You’re very close to the effect I’m looking for. The difference I’m noticing (a pretty crucial one) is that when hovering over one circle on the original design, the other 2 circles shrink. The circles in your design stay the same size. Any ideas on how to fix this? Otherwise the solution is just about spot on!

Hey, @MKDWebSolutions I get it we will have to apply the same size manipulation through webflow’s interaction panel rather than the CSS hover. by increasing the size of the first circle on hover and simultaneously decreasing the size of the other two and repeating the same for the other two. You can try this logic.

Hope it helps :peace_symbol:

Hey @MKDWebSolutions Here it is with interaction

read-only

Published

I had to write a bit of custom CSS to get a similar effect. You can work on it and make it simpler and delightful.