When I first saw Bret Victor’s Inventing on Principle talk in 2012, it left a lasting impression on me. Throughout the nearly hour-long presentation, I found myself nodding in agreement with all of his ideas. The notion that a creator should have a seamless feedback loop during the experimental phase of making an animation, game, or any other digital creative work made total sense to me. He articulated what I wanted to do with my own projects better than I could ever do.

It was around this time that I started development on Stylie, a CSS animation tool that aims to put a number of Bret’s concepts into practice. My dream is to build an animation tool that isn’t painful to use, one that fosters experimentation and, ultimately, produces an end result. I feel that Stylie has gone a long way towards achieving this, and there’s still lots more to come. I have personally learned a lot from Stylie. Not just from an application development or programming perspective, but also as a user of the tool. Direct manipulation of whatever you are trying to build is far more effective than indirect manipulation, and Stylie enables direct manipulation for animations in a way that few other tools do. At the very least, I want to show that there is a better way to create animations than the way web developers traditionally do it.

Programming an animation is like using poetry to paint

The problem with using code to create animations is that you are describing what you want an animation to do. You can go to great lengths to articulate the various intricacies of how an animation behaves, but ultimately the input (code) is very far removed from the output (how it looks and feels). Effective animating requires this gap to be as narrow as possible in order to make the tweaking process manageable. Animation requires lots of tweaking to get it just right. This is clear to anyone that has made an animation that is anything more than a simple transition. While it is entirely possible to make a beautiful animation with code alone, the tweak-test-tweak cycle is painful and time consuming. Text is just not optimized for visualizing natural motion curves and timing. It isn’t the right tool for the job.

Specialized tasks call for specialized tools. Thankfully, there are a myriad of tools available for animating content on the web. When Flash ruled the web, the Flash authoring environment was the de facto standard tool for animation. So far, the HTML5 community has failed to settle on such a tool. Here are a few of the options:

These are some of the industrial-strength tools. There are also simpler options of all shapes and sizes all over the web, but developers and designers are largely left to just figure out a tool set and workflow on their own. These larger tools offer a lot of power, but also create a barrier to entry. Being a do-everything tool for animation tends to invite a lot of complexity, which makes it hard for newcomers, but also for experienced users who just want to quickly create something simple. The tools to do anything you can imagine are there, but they don’t feel natural or intuitive, in my opinion. Good animations feel natural, and so should the tools that create them. In my time playing with the myriad of “kitchen sink” tools out there, making an animation never felt natural. Rigging up and tweaking an animation should be as intuitive as using a paintbrush on a canvas.

Stylie is my attempt at making a natural-feeling animation paintbrush. It isn’t perfect, nor is it the solution to all animation challenges, but it is way more enjoyable to use than everything else currently available. Code is very clearly one of the worst ways to animate something and we need to move away from that workflow. I hope to see more animation tools that forgo established UI paradigms, because none of them take into account the revolutionary concepts put forth by Bret Victor’s landmark presentation. Additionally, I hope to see more open source animation tools so that they remain accessible to everyone. It’s time to rethink how we approach digital animation.