Animating the breathing circles

I wanted to animate the circles in the breathing exercises like the image below. For example, one exercise includes breathing in, out and holding for 4 seconds. The four circles represent each second and the colour will change for each second.

I wasn’t entirely sure how to achieve this. I didn’t know whether to try to do it with CSS animations (the easier way) or with JavaScript. I searched online to see if there were any similar examples/tutorials but I couldn’t really find much. I had a look at CSS animation delay and transitions but I still wasn’t really sure where to begin. That’s when I decided to ask a question on Stack Overflow. I find it super helpful when I’m stuck!

I got a few answers (all answers recommended CSS and not JS), and I tried two of them. One gave a nice fading effect, while the other gave exactly what I was looking for. I tried it with my app and it works well, I just had to tweak a few things.

I’ll have to also tweak it based on the exercises.. some are 10 seconds long, and others are shorter.

Another thing I have to figure out is how to change the text from “breathe in” to “hold” to “breathe out” after 4 seconds each. But that’s a whole other thing……


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s