Component
Dynamic Toggle Component for Framer
This is a dynamic toggle component recreated in Framer, from Vaun Blu’s work. The fact that you can build interactive component like this with zero code still feels unreal. Just copy the component, customize it, and you’re done. It’s that easy.
About the resource
To create this, I started by designing an inner toggle button where the white knob uses a ‘difference’ blend mode. This allows the white text to invert its color as the knob slides across it. I added click interactions within the variants to ensure smooth animation during toggling.
About the resource
To create this, I started by designing an inner toggle button where the white knob uses a ‘difference’ blend mode. This allows the white text to invert its color as the knob slides across it. I added click interactions within the variants to ensure smooth animation during toggling.
About the resource
To create this, I started by designing an inner toggle button where the white knob uses a ‘difference’ blend mode. This allows the white text to invert its color as the knob slides across it. I added click interactions within the variants to ensure smooth animation during toggling.
The two variants of the inner toggle component.
The two variants of the inner toggle component.
The two variants of the inner toggle component.
Then, I placed this inner toggle inside the main toggle component to make the recreate the interaction seen in the original. In this component, both text labels also use the ‘difference’ blending mode, so their colors adapt dynamically as they move over black and white backgrounds. Each variant includes a click interaction to keep the toggle motion fluid and responsive.
Then, I placed this inner toggle inside the main toggle component to make the recreate the interaction seen in the original. In this component, both text labels also use the ‘difference’ blending mode, so their colors adapt dynamically as they move over black and white backgrounds. Each variant includes a click interaction to keep the toggle motion fluid and responsive.
Then, I placed this inner toggle inside the main toggle component to make the recreate the interaction seen in the original. In this component, both text labels also use the ‘difference’ blending mode, so their colors adapt dynamically as they move over black and white backgrounds. Each variant includes a click interaction to keep the toggle motion fluid and responsive.
The two variants of the main toggle component.
The two variants of the main toggle component.
The two variants of the main toggle component.
