From Checkbox to animated Toggle Switch

Hey guys!

Just wanted to share this toggle switch made out of a checkbox (no custom code), it’s clone-able in case anyone’d like to use this in a form.

here it is: https://webflow.com/website/Toggle-Switch

12 Likes

4 Likes

Awesome work loving your stuff :+1:

1 Like

would you or anyone else be interested in creating a simple yes/no toggle like this and make it clone-able?

http://cloud.orangemooncreative.com/1C0k312m3E1m

i actually found this post after doing a search to see if anyone has done it.

2 Likes

Hey @dapitts08,

I went ahead and made a simple working example of those Yes/No toggles, made it public and clone-able.
Here you go: https://webflow.com/website/Simple-YesNo-Toggle?s=yes-no-checkbox

4 Likes

OMG … you rock!!! thank you!!!

1 Like

That’s awesome! Very cool, thanks for sharing

1 Like

Too cool @SidneyOttelohe nice job!

For those of you working on animations based upon Checkboxes here are a few tips:

  • Select the little checkbox element itself (the checkmark box) and set its opacity to 0%
  • The checkbox text field is clickable and toggles the checkmark as checked/un-checked
  • Use a click interaction of clicking on the checkmark text to affect other elements on first and second click :wink:
4 Likes

@SidneyOttelohe Suuuuuuper nice work Sid! :smiley:

1 Like