AnimPanel 2.0

The first version of AnimPanel was built almost entirely in the car on a five hour drive from Chicago back to Iowa. Having used a cobbled together prototype on many projects over the years, I knew roughly what it need to do, but I didn’t put a lot of thought into the architecture of the code or the user experience.

Many months later, with longer, more intense code-driven animation projects coming up, the shortcomings of the original AnimPanel became painfully clear. In order to make my time on these projects as productive as possible (and to satisfy my shame over some of the issues) I decided to spend some time building an entirely new version of AnimPanel – the version I should’ve built the first time around.

Goals for the project #

  • Completely rethink the UX, making on-the-fly changes to speed, play range, and current time much easier and more intuitive.
  • Condense the
  • Implement a full suite of keyboard shortcuts, making the most common previewing tasks more immediate.
  • Rewrite the code base to reduce file size, and eliminate any heavy dependencies on third-party libraries.

Many of the UX solutions I landed on were borrowed from the wonderful mojs-player, which does just about everything right (but doesn't support GSAP).

Having battle-tested AnimPanel 2.0 on several large projects, I’m very happy with how things have matured, and can’t imagine building complex animations without it.

See the Pen AnimPanel Demo by cmalven (@cmalven) on CodePen.

Getting started with AnimPanel 2.0 #

AnimPanel can be installed via npm…

npm install anim-panel --save

…or by linking to the CDN in your HTML…

<script src="https://unpkg.com/anim-panel/anim_panel.js"></script>
AnimPanel 2.0 on Github

Visual Cheatsheet: CSS Grid Layout

CSS Grid Layout is going to be here sooner than you think. It’s currently available in the latest Chrome, Firefox, and Safari, and when IE support finally lands, it will be an indispensable new tool. Grid Layout is similar to Flexbox in a lot of ways, so much so that it can be a bit confusing why you would use one over the other.

The biggest difference between Flexbox and Grid Layout is that Flexbox really only tackles a single dimension (either a row or a column) well, while Grid Layout can arrange elements in both rows and columns in very sophisticated ways.

After building my Flexbox Visual Cheatsheet, I knew how useful that process was in helping me understand the available properties, so I went ahead and created a CSS Grid Layout Visual Cheatsheet as well. Once again, it really helped me wrap my mind around the options.

Note: Make sure you have the latest version of a browser that supports CSS Grid Layout.

Visual Cheatsheet for CSS Grid Layout

Visual Cheatsheet: Flexbox

It took me awhile to get comfortable with Flexbox. It’s very powerful, and can make things easy that are difficult or impossible to accomplish otherwise, but the number of options can be overwhelming, and it works entirely unlike anything else in CSS.

While resources like the CSS Tricks A Complete Guide to Flexbox are indispensable for learning the details of how things work, there’s still too much going on to serve as a quick reference.

I wanted something that was as visually condensed as possible, and easy to scan visually. I need to see what elements styled using each properly will look like.

So I created this Visual Cheatsheet for Flexbox. I find myself using it all the time, and it’s helped me become truly comfortable with Flexbox syntax for the first time. Let me know if you find it useful.

Visual Cheatsheet for Flexbox