While working on the Steam Buddy Inventory Compare web app
, I was faced with a problem: the API was incredibly slow to load. The only way I could find to build out a Steam inventory list was to pull information on each game individually, which was sometimes taking minutes to return at a time. While working on reducing that load time, I wanted to come up with a loading animation that reassured the user that things were indeed happening behind the scenes. "Ohhh," I naively thought, "What if I animated the Steam logo to be churning along? It only has two moving parts, how hard could it be?" Well, the answer to that is, "Harder than you thought, but doable".
The logo is essentially two pivoting arms, but the second arm is spinning with the first arm. Rotating the first arm is easy to do using CSS animations, but figuring out what angle the second arm should be relative to the first arm took a bit of thinking. Pretty much my only high school math memory involves finding the length of triangle sides using the SOHCAHTOA method, so I started there. I used a few helpful links to get some basic trig
and inverse trig functions
in SASS. And I was on my way.
The finished product came out great!
See the Pen Steam Logo Animated by Jamie (@jamiebclark) on CodePen.
It makes for a great addition to the loading screen of the page, and it was a great lesson in CSS animation and how far you can push SASS.