Using CSS Transform & Transition: #JavaScript30 — Day 2

In order to practice vanilla JavaScript and help land my first job as a software engineer, I am undertaking Wes Bos’ #JavaScript30 challenge.

CSS properties transform and transition

Today was Day 2 of #JavaScript30 and we explored some very cool CSS properties in order to make a clock with rotating second, minute and hour hands. To view Day 1 and my overview of how and what #JavaScript30 is, go to my Practice Makes Permanent: #JavaScript30 — Day 1 post.

Today’s video prompt introduced two new CSS properties for me: transform and transition. I believe I have used transform before, but never with this complexity.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.-MDN Web Docs

The transition-property CSS property sets the CSS properties to which a transition effect should be applied. -MDN Web Docs

For the clock, we used transform to align the hand divs vertically to start at zero. We also used it to move the rotation axis from the center of the divs, so that it would rotate around the clock and not spin in place.

The transition property was mind blowing! Transition-duration I was familiar with, but the transition-timing-function was completely new and fascinating. If not for this challenge, I have no idea when I would have stumbled on using the cubic-bezier curve in CSS! I don’t think I’ve thought about curve types since high school. But it was that function that created the tick-tock animation of the hands (most noticeable on the second hand), where the hand goes just a bit past the next second and bounces back in place for a mechanical clock like-feel. I certainly want to play around with CSS more and just see what it can really do, because I think it is a lot.

And below is the result!

Demo of our clock in action

Day 2 took about 90 minutes give or take and felt like a nice use of time. We spent time reading documentation on CSS properties as well as a refresh on the built-in JavaScript methods for Date, such as .getSeconds(). We also choose to put our code in a switch statement for a clear structure, but upon reflection, I think this could be further refactored for an easier read. Next steps for this challenge would be to add a conditional statement for the transition property when a hand degree is equal to 360 || 0. This is because, as it is, there is a 0.05 second transition in the 0 second that realigns the hands. This creates an animation glitch before resuming normal animation in the next second.

I really enjoyed Day 2 and this clock challenge. I find CSS fascinating and love seeing properties change in real time. I did feel it was actually easier than Day 1 as far as the script section went, but allowed for exploring CSS transform and transition properties which I was not previously familiar with. Down the road, I would like to try and complete some of these challenges again without any HTML or CSS starting points, but for now, my emphasis is on practicing JavaScript. For that, this program seems so far so good! If you want to check out the code, here’s my repo: 28 more to go!