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.
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.
Though the animation is driven by the Transition tab for the relevant element. See screenshot.
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.