Example: Animated Toggle Switch

If you’ve been wondering how to make a stylized “toggle switch” ([CSS example] (How To Create a Toggle Switch)), thought I’d share my example. Critiques/feedback welcome.

For the curious:

  • All elements are contained in an Outer Group (optional)
  • The Inner Group is used to store the state of the toggle (evaluates yes/no)
  • Conditional states depend on the state of the Inner group

If you structure this on your own, I highly recommend using states, not trying to use toggle settings. Using a state lets you tie it into your workflows and other parts of the page.

11 Likes

Can I ask how you got the Ionic toggles to animate here? I see the option to insert an Ionic icon but no options like Checked/Unchecked etc…?

I made these quite a while back. :slight_smile:

Though the animation is driven by the Transition tab for the relevant element. See screenshot.

1 Like

Any ideas (with CSS possibly) how I could achieve the smooth transition that is seen on Ionic Toggle Switch?

If you want a smooth animation, you can implement a shape that is hidden on page load, then animates in/out when the toggle is clicked. (Just remember to have the shape in the background and the clickable component in the foreground).

Hat tip to @romanmg for introducing me to the concept via her Animated Features template. If you’re looking for a few non-CSS ways to improve animations within Bubble, I suggest buying her template.

1 Like