Based on this Threads post by
Ozan Öztaskiran.
The original example was a more typical switch, with a checkmark icon that moves up and down based on the selection. I left a comment suggesting that the switch use a specific icon for each direction for added clarity.
I also wanted to use this as an opportunity to make use of clip-path, which I learned about in one of the earlier modules of Emil Kowalski's Animations for the Web, while also trying to learn to use Motion's
useTransform function.
Finally, I decided to animate the icons when the state switches, which added complexity to the code but also a nice little flair.
While I like the final effect, I'm not super happy with all the magic numbers I'm using to make the clip-path move smoothly between the two states.