This virtual timer was modeled after a clever countdown timer design by Time Timer. If you like this version, I highly recommend visiting their website and getting a physical clock (I am not affiliated with Time Timer in any way).
The website + visual interactions were made in Webflow, the audio is from Freesound.org, the red circle animation is from Lottiefiles.com, and the code which plays the audio was generated by me in ChatGPT.
Scroll down past the instructions to see a quick video tutorial which explain how it works.
Refresh the page. The timer resets itself to 60 minutes anytime the page reloads.
Simply hover and click on the time you want. This will wind the virtual timer automatically and begin the countdown. When time is up, a relaxing and slow to build audio file will begin to play.
Click "0min" on the timer above to preview the "alarm" sound.
I prefer a softer and more relaxing sound than your standard alarm. I like having the choice to continue working for another 1-2 minutes after my time is up, so the song I selected is 1 minutes and 48 seconds long. If the song ends, I know my time is really up.
There is a "silence" button on the right hand side of the timer on desktop and under the clock on mobile. You can also silence the alarm by selecting a new time. This will reset the clock and begin the countdown again.
The following video is about 8 minutes long and explain how the project works. If you have questions, feel free to leave a comment in the Loom video.
0:01 Hello, my name's Duncan. I'm a co-founder at a company called Memberstack. And I, I just love Webflow and getting to build fun random things.
0:10 So I figured I would make a video explaining this little project I built. The goal was, well, I had thought about buying an actual like time timer which are these really cool visual clocks.
0:23 They're great for group settings, great for just quickly keeping track of time. And at a glance you can see, get a feel for how much time you have left.
0:32 And I couldn't find any good virtual ones. Like there are some on YouTube, which are fine, but I thought it'd be really fun to make one in Webflow.
0:40 So this is the result. It is a, a working time timer. You can click to change the time, and then when it reaches the end, it will actually start to place some audio.
0:58 Oh, which I'm not on the live site, so let me fix that. Okay. So that plays for like minute and a half or something.
1:10 Just makes for a really nice transition to come back out and be like, all right, let's do another 20 minutes.
1:16 And then it starts to count down. So that is kind of how this works and why I built it. Now, behind the scenes there is, there are webflow interactions.
1:28 There's a Lottie file and there's some custom code also. Let's, first, let's look at the the structure cuz it's a little bit crazy.
1:40 And I'm gonna move myself maybe right here. So the first thing I had to figure out was how to make a circle, like make all these tallies appear in a circle.
1:51 And I was thinking I could, you know, just like open up Figma and create a graphic, but I wanted to try to do it in Webflow.
1:57 So what I ended up doing is each of these, these like degree elements are actually a large circle, which is being rotated to five or 30 degrees or the small ticks are being rotated, I think five degrees.
2:17 So each of these ticks you can imagine is actually at the very top center of a circle, which is being slightly rotated.
2:25 I'm then dropping each little rotated circle inside of, I'm nesting it inside of another circle. So it is being rotated five degrees on top of, or inside of a circle, which is already being rotated five degrees.
2:40 So we get 10 degrees and so on and so on. So it's inheriting some of the rotation from the parent elements and then it's applying a little more.
2:52 So we have these small degrees which are grouped inside of these big degrees, which are being rotated 30 degrees at a time.
3:00 And that gets us the 0 55, 50 45, all that good stuff. So now we have these numbers, which are just text elements, which now that I'm doing this, I should go ahead and add a pointer.
3:19 There we go. So now they look and feel more like links cause they have a hover and when you click on it, it is triggering a webflow interaction.3:27 There are webflow interactions for each of these. They were really easy to make. It's, it's literally just setting taking half a second to move the timer into position.
3:40 And then it's taking the number of seconds required to get to zero. And now is a good time to talk about this center because this is actually a Lottie file.
3:54 I am not an expert on lottie's, but I think if you're an unfamiliar with them, just like looking at this page, you'll get a feel.
4:01 They're kind of like gifs, but you are able to it's like SVG gifs with the youth json. Like I said, I don't know too much about them, but what's neat is Webflow is actually able to tie into that Lottie and fast forward rewind, basically control the animation.
4:20 So that's what I'm doing in here. I am. So for the five minute one for example, we're starting it off at 91.6666%, which in terms of time, it's a, it's a percent.4:38 It's, I, well, you know, it's that far through the video. <laugh> I think, I think hopefully you get that four 40.
4:57 Yeah, so I'm actually able to, so now looking at this like five minute one for example, we can see that, oh, let me get in here five minutes.5:19 So we're starting off at 91.666%, which is, it looks like this in the Lottie animation. And then after 300 seconds, which is five minutes, we are going to 100% of the Lottie animation, which is complete.
5:35 There is no more of the circle visible. Okay, so that is that. Then we have, oh no, okay, hang on, I gotta get to that.
5:47 Okay, so then we have some custom code, which I used chat GPT to generate. It's all here in the footer of the page.
5:56 I guarantee there, there are better ways to do this, but I'm not a developer <laugh>. So how to make due.
6:03 So here we go. For example, this is locating any element which has the class number five. It is adding an event listener.
6:13 So whenever I click on it, it's going to play the audio element, which is my the like timer audio that I have.
6:25 It's gonna play that after 300,000 milliseconds. And then and actually immediately immediately on click it's going to play this like subtle little like slide sound, which I'll show you.
6:49 Hopefully you can hear that I did that just kind of for fun. Yeah, it's not super loud normally, but I thought it was a fun effect.
7:02 So yeah, so it's playing the slide sound immediately and then after a predetermined number of milliseconds or seconds it's going to play the alarm sound.
7:14 I then also have of This down here. So anytime you click on an element with the class name number, it is going to stop the audio.
7:27 It's going to stop the timer audio, and that gets you this cool effect of that. You could click zero and it starts to play immediately.
7:37 But as soon as I start the timer, go to a different one, it, it ends just like that. So yeah, pretty cool.
7:49 I don't have the code set up to like restart the audio. It just kind of pauses it and starts it.
7:56 I don't know, you might decide you wanna do it differently. In which case it'd be pretty easy to change. I would just plug it into chat G p t and be like, Hey, reset this to zero to, to, yeah, the beginning of the audio whenever it plays.
8:11 Like I said, I'm not, not super worried about it. So yeah, I think that's everything. If you have any questions, feel free to leave a comment in the Loom video.
8:21 Happy to explain and yeah, hope you have a great day, great weekend, great night, whatever it is. See ya.