/purposeful-ios-animations

Meaningful iOS animations built to inspire you in creating useful animations for your apps. Each of the animations here was cloned with SwiftUI. Have you seen an app animation you love to rebuild and add to this repo?, contact [@amos_gyamfi](https://twitter.com/amos_gyamfi) and [@stefanjblos](https://twitter.com/stefanjblos) on Twitter.

Primary LanguageSwift

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.

Like Facebook Live: SwiftUI animated comments and emoji reactions

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

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
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 Get Started
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 Duolingo Custom Loading

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 Menu to close

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. Double click to install
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. Slide to power off

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. How to set up FaceID
Breath Animation: Calm App In guided meditation, animations are normally used to guide users to complete tasks. Breath Animation: Calm App
Fern Breath Here, the animation is used to give instructions to users about how to inhale and exhale. Fern Breathe
Just Breath Similaly, this animation guides users perfectly to breathe in and out. Just Breath

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 Stream Loading
Animated Placeholders Shimmering: FaceBook app, Slack, Twitter leverage animations for usability, and give hints about what is happening. Animated Placeholders
Turn-taking in chat Emulate turn-taking: Typing indicators in chat messaging apps. Leverage animations for usability, and give hints about what is happening. Turn-taking in chat
Disapproving Shake Use animation to communicate feedback. For example, the disapproving shake of FaceID signifies the need to feel ok and try again. Disapproving Shake

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. Twitter Like Reaction
Messenger Reaction Facebook Messenger Reactions Animation: A great example of using animation to allow users express how they feel in different ways. Messenger Reaction
YouTube Thumbnail Animation Will be added soon YouTube Thumbnail Animation

ANIMATION AND MEANING: Express Gratitude

SwiftUI Animation Meaning/purpose Preview
Express Gratitude Expressing gratitude. For example, Medium’s Cumulative Clap Reaction Express Gratitude

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. Intrinsic Motivation

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. Invitation to chat: No message yet
Tap this Drawing users' attention to act. Tap this
Scroll in this direction Using animation to tell users to act in a certain way Scroll in this direction

ANIMATION AND MEANING: Representation of Activities

SwiftUI Animation Meaning/purpose Preview
Siri Amimation A visual representation of hearing/listening Siri Amimation
Now playing A visual representation of audio signals/ now playing Animated Placeholders
Recording A visual representation of voice/speech recording Turn-taking in chat

ANIMATION AND MEANING: Decoration

SwiftUI Animation Meaning/purpose Preview
Decoration Bubble and screen effects: confetti, fireworks, balloons Decoration

PRINCIPLES OF GREAT & PURPOSEFUL iOS ANIMATIONS

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. Anticipation
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. Staging

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? Reactions in Stream Chat

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 Cascading text animation

Esing Functions

SwiftUI Animation (Easing Type) Timing Curve Usage Example
Default Default easing 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 Default easing
Linear: Dashes moving on a path Marching ants 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 Marching ants
Linear: Dashes moving on a path - Example: Measuring Heart Rate animation Heart rate
Linear: Rotation - Example: Rotational animation Rotation
EaseIn EaseIn example 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. EaseIn example
EaseOut EaseOut example 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. EaseOut example
EaseInOut EaseInOut example 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. EaseInOut example

Custom Timing Functions

SwiftUI Animation (Easing Type) Timing Curve Usage Example
Timing Functions Custom 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. Timing Functions

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

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 Bad notification animation

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

When animation becomes a dark pattern.

A flashing countdown timer

Slowly scaling background animation

Using spring animation in a context that feels out of place