Animations - iOS Design Handbook

Introduction to Animations

Animations should enhance the app experience. They make your app more engaging and dynamic. Good animations should provide feedback on taps and gestures, and give a sense of direct manipulation.

Use Obvious Icons

Animation Basics

There are a number of basic animation techniques that we use to transition from point A to point B. These animations are so common that they can be found of every platform, from Web to iOS.

Typically, you don’t need to set more than 2 animation states: Begin and End. The computer will know what happens in between those states.

Translate

This is as simple as moving the position X and Y. With different timing, Translate is used for sliding, bouncing and shaking visual elements.

Rotate

By changing the angle of the element, you can create interesting effects like the loading animation in iOS, or the Add icon that turns into a Close icon.

Scale

This animation pervades iOS, such as the app icon that zooms inside the app, or the photo thumbnails that expand to full-screen view.

Animation Curve

The curve plays a big part in making the animation more life-like. Good animations replicate real physics. A ball that bounces on the ground makes a much more interesting subject than one that falls flat. Modern apps tend to use Spring and Ease animations much more than Linear.

3D Transform

When changing the position, you can also play with the X, Y and Z values. Although generally more rare and harder to pull, 3D transforms can give interesting results that can really set your app apart.

Property Change

A very popular animation technique is to change the color and opacity properties. Just modifying the opacity results in the Fade In / Fade Out effect, which is extremely common. Animating the layer, text and background colors can also yield effective transitions.

Combining Animations

On almost every occasion, you’ll want to work with 2 or 3 transforms at the same time. By doing so, you get interesting animations inspired by real life physics such as Bounce, Morph, Shake, etc.

Preset Animations

On Spring, an animation framework that I created for iOS, I made available a bunch of preset animations that combine many transforms at once. They can be inexpensively integrated to your app, without even learning how to code.

Animations Shouldn't Last Longer Than 1 second

A long animation can lead to frustration — it can get in the way of performing a task. The ideal duration that I’ve personally found is 0.3 - 1 second. If you do a Fade In, Slide or Scale, that’s the duration that you should aim for. Anything shorter would make seem like there was no animation, or worse it could stress your users. Anything longer may seem underperforming and can be in the way of doing what they want.

Prototyping

Prototypes are a great way to convey our ideas visually to engineers. Creating a prototype helps your engineers understand the complexity of the interactions and foresee difficulties in setting a realistic timeline.

Micro Interactions

Micro-interactions are small or subtle functional animations that happen when peran action is performed. Micro-interactions often create a delightful and pleasant feeling. These small details incubate a positive user experience in your app.

Prototyping Tools

You have several tools to choose from. Some require little to no experience and others require a pretty steep learning curve. But the rewards are much greater. The harder it gets, the more likely your app will stand out from others.

Principle

The easiest of all is called Principle. All you need to do is set screen A and screen B, and the tool will automatically animate the elements that both share. From there, you can customize the timing and animation curve. It has a user interface that is very similar to Sketch. Tip: you can Copy and Paste from Sketch. Previewing an animation in Principle. Animation in Principle by Leon Wu. Source shared.

Protopie

ProtoPie is a very powerful tool, you can even connect hardware and do IoT tests with it. It has integrations with Sketch, Figma as well as Adobe Xd and the community is growing really fast. If you would like to learn more, we did a course about it where you can learn more tips and tricks.

Origami

Origami is a standalone app by Facebook inspired by Apple’s Quartz Composer, a tool that is famously used to prototype most of the animations you see on iOS and for Facebook Paper. Animation in Origami by Sam Thibault.

Figma

Figma is one of the most powerful design tools. Besides its many distinctive features, you can also prototype your designs. It is convenient, and it doesn't rely on any third-party apps so that you can update your designs without the hassle of updating your prototype.

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

BACK TO

Design Widgets

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

ios-design-handbook-animations

Intro to iOS 14 Design

A complete guide to designing for iOS 14 with videos, examples and design files