Splitting a bigger circle into smaller circles (loading animation)

[Germa Vinsmoke]

https://cdn.dribbble.com/users/495792/screenshots/15551533/media/4aad25ed178da887bc1535608ecd31b4.mp4

I'm trying to create the animation present in this design GIF file. I was able to make the staggering wave type of animation but not able to understand the concept behind splitting a bigger circle into smaller ones.

https://codesandbox.io/s/interesting-moon-63n4hg

Please someone explain me the concept so that I can keep trying things on my own and learn more about animation. 😃

[Cassie]

Heya!

 

With dribbble shots it's always helpful to open the video in a new tab and play through it slowly

https://cdn.dribbble.com/users/495792/screenshots/15551533/media/4aad25ed178da887bc1535608ecd31b4.mp4
 

This filter effect will probably be helpful here.

https://css-tricks.com/gooey-effect/

 

Good luck!

[Germa Vinsmoke]

Thanks

It was my first post so didn't know how to post the links properly. Sorry for that 😅

And thanks for telling me about that effect. First time hearing about that, that'll help me a lot.

Thanks 😃

[Cassie]

Oh no! You did fine!

I didn't mean 'helpful for us' I meant 'helpful for you'

If you open up the video itself you can scrub slowly through it and figure out what's happening. ☺️ It helps a lot to figure out what's happening in the animation.