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.
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.
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.