Interactive Explorations
Three interactive component explorations: save button, toggle with emojis and layout selector.
Updated 9 months ago
Interaction Design
Save Button
This Save button uses framer motion. Press the button and see state transitions.
Toggle With Emojis
This custom toggle uses staggered transform, color, and opacity transitions to smoothly slide the knob while fading between 😴 and 🥳 states.
🥳😴
Layout Selector
The four blocks in this layout selector animate fluidly between layouts, so users perceive them as the same elements being rearranged rather than replaced. This continuity helps establish a clear relationship between layouts and makes the transitions easy to follow.