Component
Switch Interaction in Framer
This is a Framer recreation of a switch interaction inspired by Nitish’s original work. Feel free to remix or copy the component into your projects and customize it however you like.
Created by
About the resource
To create this animation, I first built a switch component with two variants: Default and Expanded. Inside the switch, I added a toggle component and checkbox component.
In the default state, the toggle is visible while the checkbox and text are placed on absolute, scaled down, blurred, and set to opacity 0. In the expanded state, the closed toggle moves upward, while the checkbox and text scale back to 1, become sharp, and fade in with opacity 1.
Finally, I connected the two states with a simple click interaction on the toggle to switch between Default and Expanded.
About the resource
To create this animation, I first built a switch component with two variants: Default and Expanded. Inside the switch, I added a toggle component and checkbox component.
In the default state, the toggle is visible while the checkbox and text are placed on absolute, scaled down, blurred, and set to opacity 0. In the expanded state, the closed toggle moves upward, while the checkbox and text scale back to 1, become sharp, and fade in with opacity 1.
Finally, I connected the two states with a simple click interaction on the toggle to switch between Default and Expanded.
About the resource
To create this animation, I first built a switch component with two variants: Default and Expanded. Inside the switch, I added a toggle component and checkbox component.
In the default state, the toggle is visible while the checkbox and text are placed on absolute, scaled down, blurred, and set to opacity 0. In the expanded state, the closed toggle moves upward, while the checkbox and text scale back to 1, become sharp, and fade in with opacity 1.
Finally, I connected the two states with a simple click interaction on the toggle to switch between Default and Expanded.
The default and expanded variants of the switch component.
The default and expanded variants of the switch component.
The default and expanded variants of the switch component.
