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

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 ▬

00:00 - Intro
01:10 - High level overview
02:07 - Adding Refs
02:38 - Writing animation manager
03:56 - Building press - glow animation
05:50 - Init animation manager
08:08 - Setting easing curve
09:24 - Animate background & borders
09:57 - Animation dev tools overview
11:01 - Animate checkmark
12:40 - Hand-off animation to DOM
16:09 - Building uncheck animation
17:58 - Fixing on mount bug
19:36 - Canceling overlapping animations
21:00 - Respect accessibility settings
22:06 - Outro

[uchennaofoma]

Thanks for showing the animation devtools, amazing video

[OKieYoSHigHhost]

Amazing tutorial man! Thank you for making one so detailed and thorough. Best resource I've found for understanding this topic in particular