Component
Satisfying Checkbox Animation in Framer
This is a checkbox animation recreated in Framer from Nils original work. Remix the project or grab the component to add this smooth checkbox animation to your own project.
About the resource
To use the checkbox animation, I created three components: checkbox, stroke animation, and text animation, then combined them into one. I made a vector check icon, turned it into an icon set, and added a stroke effect for the check animation.
For the text animation, I placed a 1px line over the text, pinned it to the left in the default state, and pinned it to the right in the second variant to create a full stroke effect.
In the final component, I combined both animations with two variants: default and checked. On click, the checkbox fills with the check animation while the text animates with a stroke and color change.
About the resource
To use the checkbox animation, I created three components: checkbox, stroke animation, and text animation, then combined them into one. I made a vector check icon, turned it into an icon set, and added a stroke effect for the check animation.
For the text animation, I placed a 1px line over the text, pinned it to the left in the default state, and pinned it to the right in the second variant to create a full stroke effect.
In the final component, I combined both animations with two variants: default and checked. On click, the checkbox fills with the check animation while the text animates with a stroke and color change.
About the resource
To use the checkbox animation, I created three components: checkbox, stroke animation, and text animation, then combined them into one. I made a vector check icon, turned it into an icon set, and added a stroke effect for the check animation.
For the text animation, I placed a 1px line over the text, pinned it to the left in the default state, and pinned it to the right in the second variant to create a full stroke effect.
In the final component, I combined both animations with two variants: default and checked. On click, the checkbox fills with the check animation while the text animates with a stroke and color change.
The two variants of the checkbox animation component in Framer.
The two variants of the checkbox animation component in Framer.
The two variants of the checkbox animation component in Framer.
