Developers: Why and How to Add Animation to Your Toolbox

To stay competitive in a tough market, career driven developers know that they should always be learning new things. If you’re determined to accelerate your career, boost your portfolio, or take your own side-project to the next level, animation is where it’s at!

Many of us, especially those of us who work at companies with limitless projects and limited resources (hello startups!), too often look at animation in our apps as superfluous. When something works, it’s time to tackle the next thing. This screen goes to this screen goes to this screen… why worry about fancy transitions?

The answer is simple: it’s a better, more delightful, and (buzzword alert) stickier experience.

Why Use Animation?

Using animated transitions is an effective way to create mental connections and focus attention where you need it to be. It can help you present information in order, reducing the amount of information a user must process at any given point in time, which has the added effect of reducing the stress of your users.

Fluid design, as Apple puts it, is about making your interfaces more natural. And when people describe your app as “natural” you are in a damn good position. A whole lot better than “nice,” “functional,” “jumpy,” “frustrating,” or “confusing.” The way to achieve this is understanding the principles of effective animation.

The difference between designing/developing apps that are good and those that are great comes down to these subtle but critical additions to your app. As such, learning how to design or develop using strong animation principles can be a real boost to your career, portfolio, or personal side-project.

Animation Guidelines

I won’t go into the specifics of animation tools, code languages, or courses to take. I trust that when you get inspired, you’ll find the right way to learn for your own specialty. However, I will offer a summary of other helpful articles for how to implement animation effectively.

Duration of Transitions

Instead of switching to a new screen, it can be helpful to create a logical connection by moving and/or resizing an element on the screen to show its source, so that the destination makes sense to the user. This can be true of expanding summary cards to show more information, menus appearing and disappearing, and elements pushing other elements off the screen (like you see when swiping through a gallery, for example).

The first rule to follow is to ensure these transitions, during which the user is just watching the elements move on the screen, aren’t too “jumpy” or “lazy.” Any less than 100ms, the human brain doesn’t register as a movement. It will appear instantaneous. Over 500ms, your users will start feeling like they’re waiting unnecessarily for stuff to finish moving (they’ll want to press the next button but you’re still in animation). The ideal timing is 200-300ms for phones, a little longer for iPads, and a little shorter for watches.

Easing

Another aspect of timing isn’t just the total duration, but the speed at different points during the animation. This is the acceleration and deceleration of your elements, also called “easing,” or what Disney’s 12 Principles of Animation calls “slow in, slow out.”  Again, this is about creating a natural sense of motion, following physicals laws of inertia. Objects in the real world don’t just jump to motion and then stop. Everything accelerates to move and then decelerates to stop, so the objects in your app should too!

If in doubt, apply easing to both the beginning and end of your transitions. Sometimes it makes sense to make things accelerate forever, like when permanently dismissing something. However, most of the time you’ll want objects to move slowly at first, then quickly, then slowly at the end as they “settle in” to their final position. This “settling in” should take a little bit longer than the initial acceleration as it will draw more attention to the ending position than the starting position which, ultimately, is the whole point!

Choreography

The dance of elements! So, you have something moving from one point to another on the screen, with the right duration and a little easing to make it smooth and natural. What about the other stuff on the screen?

The first concept to follow is this: animate as few elements on the screen at one time as possible. If you have a primary motion, let it be the only motion. Once that element has settled into its final place, then bring in the other subordinate elements. Don’t overwhelm your user; do just enough for them to follow the logical connection.

The second concept to remember is that this is a 3D world expressed on a 2D screen.  Even though it’s a flat screen, changes in sizing and shadowing create a “z-axis” that must always be considered, because your users are expecting this. 

Elements with the same styling on the screen should be considered to be in the same plane, and objects in the real world cannot travel through each other. As such, when you are reordering elements on your screen, be sure to either move/hide the other objects to be out of the way or “lift” the moving object “above” the others. This is as simple as making it a little bigger and adding a shadow. Boom! The object exists above the others and can move freely as the crow flies over the other elements to where it needs to be.

—

Everything is about achieving a natural experience. The objects on your phone should behave as we humans have come to experience the real world. Why? Because millions of years of evolution to understand the world around us shouldn’t be ignored! It should be replicated so that using your app is as natural as throwing a ball, following the same laws and expectations.

Using this skill will make your work more impressive and your app stickier and more successful. So if you haven’t yet, it’s time to add this valuable skill into your toolbox.