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=""></script>
AnimPanel 2.0 on Github

Update: Since the creation of this post, Greensock has released their own official version of a similar development tool – GSDevTools. Although I prefer the more elegant UI of AnimPanel, GSDevTools is almost certainly going to be better supported in the future, so I recommend that you use it in your projects instead of AnimPanel.