Finding the perfect solution is tricky
Animation and prototyping such transitions is not an easy task. With the rise of motion in web design, I also desired to express animation through the products I designed. But I didn't want to do simple animations. I wanted complex motion. Something that would wow a visitor to a website or a user of a mobile app. However, looking through what already existed yielded little fruit and I couldn't quite find what I was looking for.
During my full-time job at Bixly, I went through some brainstorming sessions to see what kind of application would need to be built to serve that need. The goal ultimately wouldn't be to actually build a full-fledged product but to see what ideas may or may not work – to see if an interface for animating web content at the desired level was plausible.
We discovered that previous attempts at competing animation software usually fell into one of a few categories in terms of approach. Some took the total-code route and made it easier for developers to create and prototype animated content by making the code easier to write and implement. Others made the entire building experience GUI-based and tried making the animation process easier for everyone else.
Bearing these things in mind, I worked on jotting down what my coworker and I wanted from an animation prototyping product. After that, I came up with a handful of solutions, some old, some fringing on new.
Some ideas take shape
With some fresh perspective and an itch to get some ideas on paper, I began sketching out some ideal layouts for animating transitions. My efforts yielded some pros and cons for the user of such a workspace.
User story time
Now that I had some general layouts drawn out, I started to drill a little more into how a user might go about applying animations to an object. I wanted the procedure to be easy but not so much that it left users with a degraded sense of control. As I discovered while weighing my options, some UI patterns created happy mediums more than others.
To help me with this task, I wrote out a short, generalized story of a user going through the motion (pun intended) of applying a transition effect to an element. The actions taken during the story were meant to be simple so as to keep my interface options simple.
An exercise in user-centered design
As much as me and my partner wanted to pursue this application idea further, ultimately our pressing workload at our day-jobs won out in the end. While this conceived product remained a concept and was never built to completion, it was a fine brain-teaser and got me to put an idea through it's paces. It's easy to start creating interfaces that work. It's harder making interfaces that work well for human beings. Such is the case for creating a product that does something as complicated as orchestrating complex animations!
Regardless, I take joy from figuring out the difficult parts of making interfaces because I know that through trial and error, beautiful experiences are born that others can hopefully utilize and share. Putting the right animation tool in the hands of creative people might be one of those experiences in the future!