Switch Stretch Animation

Summary

A microinteraction study showing toggle switches with a satisfying stretch effect on press, comparing plain vs physics-based thumb animation across on and off states.

Visual description

A minimal UI demonstrating toggle switch states. A large gray rounded pill-shaped switch component occupies the upper half, with its left side showing an unpressed state and right side showing the toggled on-state. The switch has a subtle border and clean proportions. Below it sit two rounded button labels, Plain and Stretch, indicating the comparison modes for the animation study.

Key takeaway

Present interactive component variations side-by-side within a single component frame to show before-and-after animation states, making comparative motion study clear without separate screenshots.

Reuse notes

Reach for this as a motion still reference. Pairs with minimal, clean directions. Original by Florian.