UI Experiments
Writing
Courses

Vertical icon switch

motion
clip-path
useTransform
tailwind
react

Based on this Threads postby 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.