Explaining basic controls, take 3 (see also rants about spinners grumpy.website/post/0Q2GqJ4EI and galleries grumpy.website/post/0TXmhwdtP)
The toggle was designed after, well, physical toggle. It’s a piece of plastic with a round bump in it moving inside a hole in an enclosure. Many devices around us have these, and that’s why it’s such a great metaphor. It also should give us a clue to how it should be animated: labels and colored background should move with the toggle, because physically they make up one single piece of material. And that piece moves left and right all at once inside a hole.
Top: wrong, nonsensical animation.
Bottom: perfect understanding.