Streaming live at 10am (PST)

From Checkbox to animated Toggle Switch


#1

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


#2

#3

Awesome work loving your stuff :+1:


#4

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.


#5

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


#6

OMG ... you rock!!!! thank you!!!!


#7

That's awesome! Very cool, thanks for sharing


#8

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:

#9

@SidneyOttelohe Suuuuuuper nice work Sid! :smiley:


#10