Introducing AnimPanel: a better way to build animations using Greensock Animation Platform

We're big fans of the Greensock Animation Platform here at One Design. It's hands-down the most powerful, flexible tool for creating sophisticated animations for the web, and over the years we've used it extensively on our own site and on many other projects.

As the animations we've built grew more and more complex, though, we started to miss some of the animation niceties we're used to from professional apps like Adobe After Effects.

The ability to play, pause, rewind, change playback speed, or easily preview portions of the overall animation – without jumping back into code – significantly accelerates the typical "tweak, preview, repeat" cycle of developing a great animation.

So we built AnimPanel, a javascript-based utility panel that adds a bundle of extremely useful tooling for building top-notch animations using GSAP.

A better workflow

Creating any kind of animation is an inherently "you know it when you see it" type of endeavor. Even experienced animators need to see the result of every change they make before they can really evaluate what is or isn't working. This means many, many rounds of making a timing change, previewing the new change in action, and adjusting that change further to dial in exactly the right behavior.

This routine is even more painful when building 100% code-driven animations using tools like GSAP, because you have literally no visual stimuli to respond to until you save the change and preview in the browser.

While AnimPanel can't eliminate the need to repeatedly preview your work, it can make the time you spend previewing far more productive. It does this by providing a GUI that lives right next to your animation in the browser and includes a bundle of handy functionality, including:

• Play, pause, and restart buttons
• A visual playback scrubber
• Buttons to dynamically change the playback speed (1x, 0.5x, 0.2x, etc)
• A display of the current timeline time
• For TimelineMax timelines, automatically-added buttons to jump to each label in the timeline
• The ability to easily set custom loop in and out times for focusing on a specific span of the overall timeline, and these in/out points are persistent between page refreshes

See it in Action

The best way to get a feel for what AnimPanel does is to play around with it, so we've created an AnimPanel CodePen Demo with a basic timeline animation. When you're ready to try using AnimPanel for your own projects, you can find full installation and use instructions at AnimPanel on Github. Find a bug or have a feature request? Let us know in a Github issue!