Purposeful iOS Animations
Meaningful iOS animations built to inspire you in creating useful animations for your apps. We created all with SwiftUI. Grab the Xcode project or use this repo as your source of inspiration for SwiftUI animations for iOS. Have you seen an app animation you love to rebuild and add to this repo?, contact @amos_gyamfi and @stefanjblos on Twitter.
These animations were used for the conference talk, "Animations Are Cool, Right?" by Amos & Stefan at Swift Conf 2022
Learn to create meaningful and purposeful iOS/SwiftUI animations
THE MEANING AND PURPOSE OF iOS ANIMATIONS
Delight and Whimsy
ANIMATION AND MEANING: Delight and Whimsy
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Springy Duo | Making the resting state bouncy makes the animation more fun. |  |
| Duolingo Get Started | Yes, you can animate things just for fun and whimsy. The Duolingo getstarted animation makes it fun and delightful to get started to use the app. The playful animation here can help Duolingo win users over other language learning apps. |  |
| Duolingo Custom Loading | System-provided loading indicators can sometimes feel out of context. So, create custom iOS (SwiftUI) loading animations to match your brand style and provide immersive UX like what Duolingo did for content loading |  |
State Change
ANIMATION AND MEANING: State Change
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Menu to close | Animation can be used appropriately to indicate that a UI element has changed to a different state. For example, Morphing a hamburger menu seamlessly into a close icon. This communicates the difference between the menu and close/cancel modes. It creates a bouncy hamburger menu to close icon transition |  |
Attention
ANIMATION AND MEANING: Attention
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Double click to install | iOS AppStore (Double-Click to Install): A great example of attracting usersโ attention using animation. |  |
| Slide to power off | When used in a subtle way, it can invite users to interact with it. For example, iOS slide to power off. |  |
Guide Users
ANIMATION AND MEANING: Guide Users
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| How to set up FaceID | Use animation to communicate and demonstrate. It can be used to show status information. This is a great way to show how things change over time. For example, what will happen when a user initiates an action?. Animation can also be used to provide feedback, or guide users - Describe what people need to do next. Example: How to setup FaceID. |  |
| Breath Animation: Calm App | In guided meditation, animations are normally used to guide users to complete tasks. |  |
| Fern Breath | Here, the animation is used to give instructions to users about how to inhale and exhale. |  |
| Just Breath | Similaly, this animation guides users perfectly to breathe in and out. |  |
Feedback and Hinting
ANIMATION AND MEANING: Feedback and Hinting
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Stream Loading | System-provided loading indicators can sometimes feel out of context. So, create custom iOS (SwiftUI) loading animations to match your brand style and provide immersive UX like what Stream did for app launching |  |
| Animated Placeholders | Shimmering: FaceBook app, Slack, Twitter leverage animations for usability, and give hints about what is happening. |  |
| Turn-taking in chat | Emulate turn-taking: Typing indicators in chat messaging apps. Leverage animations for usability, and give hints about what is happening. |  |
| Disapproving Shake | Use animation to communicate feedback. For example, the disapproving shake of FaceID signifies the need to feel ok and try again. |  |
Augment Feeling/Emotion
ANIMATION AND MEANING: Augment Feeling/Emotion
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Twitter Like Reaction | A great example of using animation to allow users express how they feel in different ways. |  |
| Messenger Reaction | Facebook Messenger Reactions Animation: A great example of using animation to allow users express how they feel in different ways. |  |
| YouTube Thumbnail Animation | Will be added soon |
Express Gratitude
ANIMATION AND MEANING: Express Gratitude
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Express Gratitude | Expressing gratitude. For example, Mediumโs Cumulative Clap Reaction |  |
Intrinsic Motivation
ANIMATION AND MEANING: Intrinsic Motivation
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Intrinsic Motivation | Intrinsic motivation (mostly in gaming apps.). For example, showing confetti or fireworks animation after users achieve something great. This encourages users intrinsically to perform their goals when using your app. Duolingo does a great job to display fireworks once you complete a lesson. |  |
Invitation to Act
ANIMATION AND MEANING: Invitation to Act
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Invitation to chat: No message yet | No messages yet: A great way to encourage people to start their first conversation. Telegram uses similar animations in interesting ways to let people begin chattin with their love ones for the first time. |  |
| Tap this | Drawing users' attention to act. |  |
| Scroll in this direction | Using animation to tell users to act in a certain way |  |
Representation of Activities
ANIMATION AND MEANING: Representation of Activities
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Siri Amimation | A visual representation of hearing/listening |  |
| Now playing | A visual representation of audio signals/ now playing |  |
| Recording | A visual representation of voice/speech recording |  |
Decoration
ANIMATION AND MEANING: Decoration
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Decoration | Bubble and screen effects: confetti, fireworks, balloons |  |
PRINCIPLES OF GREAT & PURPOSEFUL iOS ANIMATIONS
Anticipation
ANIMATION PRINCIPLE: Anticipation
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Anticipation | Using EaseInOutBack to create anticipation: It gives users a sense of what is about to happen. Example: Transition an image from thumbnail to fullscreen. This effect causes the image to scale down slightly before it scales up to the fullscreen mode. The opposite occurs when transitioning from the fullscreen mode to the thumbnail view. |  |
| Staging | Use animation to prepare the viewer for changes. Direct the userโs attention to focus on the important elements on the screen. For example, number changes (Count down and count up). You can also use fade-ins. Changing data on the screen: Number of steps taken in the StepsApp. If a number changes instantly from 0 to 100. It is easy to miss what just changed. Seeing what is changing prepares the viewerโs attention and directs their focus to whatโs about to happen. |  |
Follow Through
ANIMATION AND MEANING: Follow Through
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Reactions in Stream Chat | Follow-through using Spring Animations: Using the principle of physics to create soft and imprecise movements. It overshoots the resting state to create fluid and bouncy animations. Learn more about SwiftUI Spring Animations. Note: Spring animations do not belong everywhere. Before you use springs, it is good to ask, will the animation feel out of context by overshooting its resting state? |  |
Overlapping Action
ANIMATION AND MEANING: Overlapping Action
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Cascading text animation | This principle can be used to create an object sequence and stagger by cascading/offsetting similar elements animating in the same way as well as distributing their entrances over time instead of animating them at once |  |
Esing Functions
Easing
| SwiftUI Animation (Easing Type) | Timing Curve | Usage | Example |
|---|---|---|---|
| Default |  |
This is the default system timing function. It is similar to EaseInOut and ensures that the timings of your animations match that of most system animations such as iOS, watchOS, macOS, tvOS. It works best for for onscreen animations |  |
| Linear: Dashes moving on a path |  |
It does not conform to natural laws of motion. It hasd a constant speed and feels mechanical rather than natural. There is an acceleration of 0 (no speedup or slowdown). Example: Animated marching ants effect |  |
| Linear: Dashes moving on a path | - | Example: Measuring Heart Rate animation |  |
| Linear: Rotation | - | Example: Rotational animation |  |
| EaseIn |  |
EaseIn also refers to as acceleration. It begins slowly but its velocity increases over time. You can use it for auto-initiated animations and to move objects off the screen. It is purposely used for animating objects that require less attention. For example, making a bell icon slide through the top edge from the screen. |  |
| EaseOut |  |
EaseOut pacing causes animation to speed up quickly and slow down as it progresses. You can use it to move objects onto the screen. In this example, the bell's rotation uses spring animation. It moves into view with easeOut which is more appropriate for moving objects onto the screen. |  |
| EaseInOut |  |
Ease-in-ease-out pacing, causes an animation to begin slowly, accelerate through the middle of its duration, and then slow again before completing. It is suitable for moving objects across/on the screen from one point to another. Think of it as the the motion of a car. It is also useful for moving an object towards another. You can use it for human-initiated animations/interactions. Examples, button tap and page-to-page transitions. |  |
Custom Timing Functions
Custom Timing Functions
| SwiftUI Animation (Easing Type) | Timing Curve | Usage | Example |
|---|---|---|---|
| Timing Functions |  |
Do you want your animation to look and feel unique? If yes, you can use custom timing functions to create, for example, the following animation effects. Sinusoidal: Gentle effects, Circular (easeInCirc): Animations that require dramatic acceleration, Exponential (easeInExpo): Exaggerated, fast, and energetic effects, Special effects: easeInOutBack. The graph of easeInOutBack Goes beyond the start and end position of easeIn and easeOut. On iOS, a great example is the App Store Todayโs view: Card transition from its summary to the detail view. |  |
iOS ANIMATIONS BEST PRACTICES
-
The animation should be nimble and precise:
- This helps to convey information more effectively
- Do not keep users waiting longer than they should.
- Loading indicators are very useful but do not make the animation run forever, For example, Deliveroo
-
Follow basic accessibility guidelines: Why?
- The screen flashing rapidly can cause headache and seizure
- People with visual disorders (vestibular):
- Excessive motion like 3D effects can cause discomfort, dizziness, and headache
- Examples: Parallax, sliding, and flashing animations
- People may think the app is frozen or sluggish
-
Reduce Motion: Turning off animation and motion effects
-
People who are sensitive to motion and screen effects
-
How it works:
- The default dissolve effect is used instead of zoom or slide.
- When on, it disables parallax effects, wallpapers animation, and others
-
Excellent Examples:
- iOS Weather app: Weather animations are disabled when reduce motion is on.
- iOS Messages app: Provides the ability to set full-screen message effects on/off
-
In-app Use Motion: On/Off
- Implement in the settings of your app the ability to turn off animations, effects, and custom transitions
- Worth mentioning: PCalc
- Users have the option to turn off the scaling animation of buttons any time they are pressed.
- Make onscreen animations/motion optional
- Do not make it the only way to communicate information.
- Why?:
- People who experience motion sickness when traveling in a vehicle
- Nausea: When the sense of vision and hearing sends conflicting information to the brain due to motion.
- Vestibular triggers: Scaling, zooming, and excessive blurring animations
- Can give the illusion that the user is moving in physical space
- Examples:
- Slowly scaling background.
- Spinning and vortex effects (some Core Image filters):
- People with vestibular disorders can lose their balance
-
Use system components:
- In iOS, most system components automatically include motion which helps to ensure a familiar and consistent experience within your app
- Creating custom motion. When you need to create a custom motion, always ensure that:
- It does not make users overwhelmed
- It keeps users oriented
- It gives clear feedback in response to usersโ actions
-
BAD iOS ANIMATION EXAMPLES
BAD iOS ANIMATION EXAMPLES
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Bad notification animation | Here is another example using a wrong easing for animation. The animation uses linear easing for rotating the bell icon and that causes the animation to jerk at the end. This can be improved by using easeOut, easeInOut or a custom sine curve to create a gentle rotation. Also, the bell icon icon rotates at the wrong anchor. Users always perceive a bell icon to be rotated at its hinge. That is the top. Rotating it at the center make it weird |  |
Animation that makes users wonder:
Forever rotating spinner, Deliveroo
Grabbing/hijacking usersโ attention:
Excessive flashing animations
Using wrong easing:
EaseIn: Opacity and scale animations
Disoriented animation:
A bottom sheet sliding up to reveal and sliding to the side to dismiss
Distracting users with animation
Animation getting in the way of completing the task
Animation preventing a toolbar icon to respond to tap