I have a working breathing app prototype. As with other breathing apps out there, I have a working animation that scales up a circle for the inhale, and scales it down for the exhale all done entirely with CSS.
However, I’d love to implement sounds and other fun stuff to it which would only work with JS so I need help here as I’m not very familiar with JS. I want to trigger the scale up on an even, and the scale down on another (based on a timer that I would build with bubble).
How would you set this up? Thanks for the help guys!
Triggering CSS animations on click, you need to change the element’s HTML ID to a class that has an animation. Turns out you can do this dynamically in Bubble using conditionals. You can set an HTML ID to be a state, so that when it’s inhale, have it change to the HTML ID “inhale”, and so forth.
I basically set the timer of the “Inhale hold” action after the inhale trigger has gone off. Then the Exhale timer when the inhale-hold trigger has gone off, and so forth.
Notice that the timer’s time is set as the duration of the inhale (in miliseconds).