Jeremy Kahn's Dev Blog

There's always a method to my madness.

Creating CSS Animations With Just Your Mouse

Animation is an inherently visual art, and I believe that there need to be visual tools to assist us in creating them. Not unlike Bret Victor, I think that the gap between the input and the output of the creative process should be minimal, and iteration should be painless. I’m also incredibly lazy and believe that making animations (or anything, for that matter) should be quick and easy. I develop an app called Stylie in my free time, a tool that tries to satisfy these ideals. Among other things, Stylie lets me stretch my creative legs with regard to UI/UX design. I’m not a designer by any means, but I can generally identify UI elements that obviously do or don’t work.

All of the UI decisions I make with Stylie are deliberate and carefully considered. I like the current UI, and I’m careful about cluttering it up with unnecessary or awkward features. In other words, I don’t want it to become The Homer. At the same time, I want to automate as much of the process of scaffolding an animation as I can, because I use Stylie quite a bit and get annoyed with repeating certain actions over and over again. Ironically for an adamant Vim user, I’ve found that using my mouse to work with the UI is far easier than using the keyboard to tweak an animation, so I’ve worked to optimize that workflow. In doing so, I inadvertently developed a way to develop complex CSS animations without using the keyboard at all.

My Stylie workflow

While Stylie is a web app and will work on any modern browser on any desktop platform, I develop it on OS X. Therefore, Stylie has an even more optimized mousing experience on late-model Apple laptops and desktops with a Magic Trackpad. If you are on OS X, you can enable three-finger dragging:

This feels weird at first, but once you get used to it, you’ll have no idea how you got by without it. It makes the overall dragging experience feel more natural and gestural. When using it to select blocks of text, it feels like you are “drawing” around the text you want. Happily, three-finger drag works perfectly with Dragon, the jQuery dragging plugin that powers Stylie. It’s not magic, three-finger drag just invisibly inputs the initial click that would initiate a drag motion. This makes any interface that requires lots of cursor dragging much more elegant, so I highly recommended enabling the feature.

The first thing I’ll do is create however many keyframes I’ll need (by clicking the “+” button in the upper right of the Keyframes panel or hitting “K” on the keyboard) and drag them around with three fingers. However, the positioning of the points often needs some finessing, so I’ll usually have to tweak the corresponding values in the Keyframe panel. There are several ways to interact with Stylie’s number fields, all of which are designed to be similar to Chrome Dev Tools:

  • Re-type the value
  • Hit “up” or “down” on the keyboard to tweak the values
  • Hover the text input with the mouse and scroll up or down to tweak the values

The last method is the most useful for me, as it’s both quicker and more fun than switching to the keyboard to change the values. Personally, I wish I could scroll the mouse to increment any number input on the web, so I built it into Stylie.

So, rather than clicking around and re-focusing the various number fields (which there are a lot of), I’ll just hover my mouse and “scroll” the values. This feels like a much more efficient and natural way to tweak numbers, to me. This is particularly useful when modifying rotation values (RX, RY, and RZ for each keyframe).

Next, I’ll tweak the easing formulas. Stylie supports all of the “classic” Robert Penner formulas, but you can also create your own with the curve tool.

To use a custom easing curve, just link it on a per-property basis in the Keyframes panel. The drag handles on the easing tool work the same as the keyframe crosshairs, so you can three-finger drag those as well, or just scroll the number fields.

A lot of animations also call for some kind of rotation. While you can achieve full three-axis rotation by tweaking the keyframe number fields as I explained earlier, it’s easier to hold the Shift key on the keyboard (I know, I’m going against the title of this post) to bring up the rotation Cubelets. You can just click and drag (or three-finger drag!) the Cubelets until they face the way you want for the various points in the animation.

Once I’m done with tweaking an animation, I’ll grab the generated code from the CSS panel and I’m done. With this workflow, I’ve found that using Stylie is a fluid and somewhat gestural way to quickly create and tweak an animation. Rapid prototyping and iteration is a key component of making animations that work well within a game or application, and I hope to keep developing Stylie to explore what other methods are effective for simplifying what is normally a pretty painful process.