Creating a doughnut effect in REACT

[TaiwoJazz]

Hey guys,

It's been like almost 48 hours i have been doing a lot of try and error trying to replicate the below animation. I'd appreciate if anyone can help fork and modify my minimal demo or maybe is something like that has been created before and the code is available in JavaScript, i can convert it to React.

 

Please don't mind my code, i have been modifying for hours https://stackblitz.com/edit/candour-training?file=src%2Fstyle.css,src%2FApp.js

Here is a short video of it on Loom
https://www.loom.com/share/9cebdfd4a29f4c41954094823e57481b?sid=7e8c4e1e-013d-430b-a654-4cfa4139740c

The animation itself can be found on https://unikorns.agency/ homepage in case you want to check

Thanks in advance

[Rodrigo]

Hi,

 

No need for all those funky scales, just use a circular clip path:

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

 

Hopefully this helps.

Happy Tweening!

[TaiwoJazz]

Thanks @Rodrigo

Final look here https://stackblitz.com/edit/candour-training?file=src%2FApp.js