About GSAP

This week’s Codepen challenge theme is Hot/Cold. When I read this, my first thought was to create a pen that had something to do with current weather conditions. Then, while I was browsing the the example/inspiration pens, I saw the animated water heater created by owlypixel. The dials in this pen are animated using GSAP animation library. They made me think of the heater/AC dials in older automobiles. Making a pen that recreates one of these dials seemed like a good fit for the Challenge theme.

Draggable is the name of the specific GSAP plugin that was used in the animated water heater example. The plugin is part of the GSAP free tier, is easy to implement and configure, and has some very cool options – like the liveSnap option that makes the dial rotate more like the knob in an automobile rather than with a smooth motion.

The rest of the dial was very easy to make. The outer design of the dial, indicating hot or cold temperature with blue and red, was inspired by my childhood memories and drawn using Affinity Designer and exported to SVG. I then included the SVG code in JavaScript so it could be converted to base64 and applied to the dial background. The dial itself is just a <div> element with a gradient background and a clip path.

To make the dial do something, I added an event listener on the dial for the custom "drag" event that changes the temperature of the background color based on the dial setting.

Here is my pen for the Hot/Cold Challenge:

See the Pen Automobile Temperature Dial by Aaron Pinero (@aaronpinero) on CodePen.

I never cease to be amazed by the free resources available online for quickly getting web work done. I must remember this library for future use.