How to build an animated checkbox in React using WAAPI - Part 1

The Web Animations API (WAAPI) provides JavaScript developers access to the browser's animation engine and describes how animations should be implemented across browsers. We will be leveraging it to build a custom animated checkbox in this 2 part series.

▬ Contents of this video ▬

0:00 - Intro
00:17 - Code overview
01:16 - Start building checkbox
01:58 - Writing base checkbox styles
04:53 - Making checkbox react to state
05:41 - Fixing default focus capture
06:33 - Creating the checkmark
10:34 - Finishing off and fixing a bug
11:48 - Hiding the default checkbox - End