Day Seven: Animations

When I started reading this post The Importance of Context-Shifting in UX Patterns by Sarah Drasner I thought for sure that I was getting roped into yet another valid article about how interruptions destroy productivity for developers.

That was twelve hours ago. There were lots of time sensitive tasks to address this afternoon, so I bookmarked the article for later.

When the Slack notifications finally slowed down I finished reading through it. I was glad to discover that the article was mostly about using animations to make interactions feel fluid and intuitive.

I'd used CSS translate to enhance button clicks before, but I'd never taken the time to play with animations for animation's sake. So, I headed over to CodePen, forked a pen, changed some HTML and CSS, played around with the math, and now I've got some magical moving rings.


See the Pen Moving Colors by Melanie Crissey (@melaniecrissey) on CodePen.