GetStream/purposeful-ios-animations

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

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