Based on this Threads post (opens in new tab) by
Ozan Öztaskiran (opens in new tab).
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 (opens in new tab) 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 (opens in new tab), while also trying to learn to use Motion's
useTransform (opens in new tab) 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.