Take Me Home

Transition: UI Animation Tool 2013

These days, showing a static mockup to a client may not convey everything you want to show off about your design. Animation is now a big part of apps and sites, and a lot of the time, you (and your clients) don't get to see the different UI transitions until development is done. How to impart that je ne se quois that only animation can provide?

The first thing we do in a Transition document is to import all the elements of the screen that we want to animate. These are the separate pieces that operate independently from other stuff. We then arrange them according to our mockups (we could also import a layered file such as a PSD or Fireworks PNG to have things already laid out for us). We can add properties to the elements that we want to animate. We're going to animate the scale and opacity of a modal (which is itself composed of several elements that will also be animated in a different transition). Finally, we add hotspots to elements to serve as triggers for the animations.

Once we've arranged the page how we like, we can move on to the Animate tab. Here we create the different transitions within our page. The "Modal appear" transition is selected and we're editing its properties on the right. We give it a length and set its trigger. The trigger could be a hover, a click, a rollout, or something else I'm not thinking of right now.

For the transition to work, we need to select which elements on the page we are animating. Once we've done that, we click one of the elements to adjust how its properties will animate. We can then edit both the start and end values of the element's properties. If we want, we can set an interpolation for the animation to mimic natural motion. The animation's start state can be automatically set to the end state of another transition, so that, say, once the page loading transition has played, we can initiate the modal appear transition seamlessly.

While we're editing a transition's properties, we can see how it looks in the beginning, end, or somewhere in between.

Here we see a menu showing that we can quickly set a transition to a number of common presets. We can also set an individual property to animate faster or slower than the rest of the transition or give it a different interpolation.

Once we're happy with our transitions, we can view the whole shebang in the View tab. Here we can click through the page and see all our different transitions play. If everything looks peachy, we can share this view with others via the share button, so that all may revel in the animated delights.

Take Me Home