DEV Community

loading...
Cover image for Building TikTok's record button using Framer Motion & React

Building TikTok's record button using Framer Motion & React

sam_piggott profile image Sam Piggott Updated on ・1 min read

Summary

The TikTok record button is a deceivingly complicated UI element with some interesting moving parts, so I thought it would be perfect for a tutorial. In the guide above, we'll build a fully animated record button using nothing but React, Framer Motion (a fantastic animation library), and TypeScript.

Project Files

All the project files are available to download and use yourself over on my website, CodeSnap.io.

Demo

Thanks!

Thanks for watching - any and all feedback is greatly appreciated, and please share it around if you think it'll be useful to anybody else. If you're interested in learning more, I've got loads more video and written content over on my website, CodeSnap.io..

Discussion (2)

pic
Editor guide
Collapse
seifeldeen92 profile image
Seif El Deen Khaled

That is so cool, thank you for sharing!

Collapse
sam_piggott profile image
Sam Piggott Author

No worries! Let me know if you manage to build anything from it, I'd love to see it :)