Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/GetStream/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.
https://github.com/GetStream/purposeful-ios-animations

animations app-animations ios ios-animations ios-app swiftui swiftui-animations swiftui-example swiftui-learning swiftui-projects swiftui-tutorials

Last synced: 3 months ago
JSON representation

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.

Awesome Lists containing this project

README 

        
## 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](https://twitter.com/amos_gyamfi) and [@stefanjblos](https://twitter.com/stefanjblos) on Twitter.



![Like Facebook Live: SwiftUI animated comments and emoji reactions ](https://github.com/GetStream/swift-and-swiftui-tutorial-projects/blob/main/AnimatedEmojiReactions/FunEmojiReactions.gif)



These animations were used for the conference talk, "**Animations Are Cool, Right?**" by Amos & Stefan at [Swift Conf 2022](https://swiftconf.com/#/)

----



### Learn to create meaningful and purposeful iOS/SwiftUI animations



## THE MEANING AND PURPOSE OF iOS ANIMATIONS

### [Delight and Whimsy](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/DelightAndWhimsy)

**ANIMATION AND MEANING:** Delight and Whimsy



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

|  [Springy Duo](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/DelightAndWhimsy/DuoLingoAnimations/SpringyDuoGetStarted.swift) | Making the resting state bouncy makes the animation more fun. | ![Duolingo Get Started ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/springyDuo.gif)  |  

|  [Duolingo Get Started](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/DelightAndWhimsy/DuoLingoAnimations/DuoGetStarted.swift) | 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/duoGetstarted.gif) |  

|  [Duolingo Custom Loading](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/DelightAndWhimsy/DuoLingoAnimations/DuoLoading.swift) | 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](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/duolingoLoading.gif) | 

---



### [State Change](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/StateChange)

**ANIMATION AND MEANING:** State Change



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

|  [Menu to close](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/StateChange/HamburgerToClose.swift) | 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/menuToClose.gif)|  

---



### [Attention](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/Attention)

**ANIMATION AND MEANING:** Attention



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

|  [Double click to install](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/Attention/DoubleClickToInstall.swift) | iOS AppStore (Double-Click to Install): A great example of attracting users’ attention using animation.| ![Double click to install ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/dbClickInstall.gif)| 

|  [Slide to power off](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/Attention/SlideToPowerOff.swift) | 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/swipeToPowerOff.gif)| 

---



### [Guide Users](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/GuideUsers)

**ANIMATION AND MEANING:** Guide Users



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

| [How to set up FaceID](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/GuideUsers/HowToSetupFaceID.swift)| 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/howToSetUpFaceID.gif) | 

| [Breath Animation: Calm App](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/GuideUsers/CalmBreatheAnimation.swift) | In guided meditation, animations are normally used to guide users to complete tasks. | ![Breath Animation: Calm App ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/calmBreath.gif) | 

| [Fern Breath](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/GuideUsers/FernBreathe.swift) | Here, the animation is used to give instructions to users about how to inhale and exhale. | ![Fern Breathe ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/fernBreath.gif) | 

| [Just Breath ](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/GuideUsers/JustBreathe) | Similaly, this animation guides users perfectly to breathe in and out. | ![Just Breath ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/justBreath.gif)| 

---



### [Feedback and Hinting](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/FeedbackAndHinting)

**ANIMATION AND MEANING:** Feedback and Hinting



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

| [Stream Loading](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/FeedbackAndHinting/StreamLaunchscreenAnimation.swift)| 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/streamLoading.gif) | 

| [Animated Placeholders](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/FeedbackAndHinting/AnimatedPlaceHolder.swift) | Shimmering: FaceBook app, Slack, Twitter leverage animations for usability, and give hints about what is  happening. | ![Animated Placeholders ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/animatedPlaceholder.gif) | 

| [Turn-taking in chat](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/FeedbackAndHinting/TypingIndicatorsInChat.swift) | Emulate turn-taking: Typing indicators in chat messaging apps. Leverage animations for usability, and give hints about what is  happening. | ![Turn-taking in chat ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/typingIndicators.gif) | 

| [Disapproving Shake ](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/FeedbackAndHinting/DisapprovingShake.swift) | Use animation to communicate feedback. For example, the disapproving shake of FaceID signifies the need to feel ok and try again. | ![Disapproving Shake ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/disApprovingShake.gif)| 

---



### [Augment Feeling/Emotion](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/AugmentFeeling)

**ANIMATION AND MEANING:** Augment Feeling/Emotion



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

|  [Twitter Like Reaction](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/AugmentFeeling/TwitterLikeReaction) | A great example of using animation to allow users express how they feel in different ways. | ![Twitter Like Reaction ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/twitterLike.gif)  |  

|  [Messenger Reaction](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/AugmentFeeling/MessengerReactions) | Facebook Messenger Reactions Animation: A great example of using animation to allow users express how they feel in different ways. | ![Messenger Reaction ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/messengerReaction.gif) |  

|  [YouTube Thumbnail Animation](#) | Will be added soon | ![YouTube Thumbnail Animation ](đź‘Ť) | 

---



### [Express Gratitude](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/EspressGratitude/MediumClapReaction)

**ANIMATION AND MEANING:** Express Gratitude



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

|  [Express Gratitude](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/EspressGratitude/MediumClapReaction) | Expressing gratitude. For example, Medium’s Cumulative Clap Reaction | ![Express Gratitude ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/expressGratitude.gif)|  

---



### [Intrinsic Motivation](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/IntrinsicMotivation)

**ANIMATION AND MEANING:** Intrinsic Motivation



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

|  [Intrinsic Motivation](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/IntrinsicMotivation) | 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/duoLessonComplete.gif)|  

---



### [Invitation to Act](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/InvitationToAct)

**ANIMATION AND MEANING:** Invitation to Act



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

| [Invitation to chat: No message yet](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/InvitationToAct/InvitationToChat)| 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/noMessageYet.gif) | 

| [Tap this](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/InvitationToAct/TapThisButton.swift) | Drawing users' attention to act. | ![Tap this ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/tapButon.gif) | 

| [Scroll in this direction](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/InvitationToAct/ScrollInThisDirection.swift) | Using animation to tell users to act in a certain way | ![Scroll in this direction ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/scrollInthisDirection.gif) | 

---



### [Representation of Activities](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/RepresentActivity)

**ANIMATION AND MEANING:** Representation of Activities



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

| [Siri Amimation](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/RepresentActivity/ListeningSiriAnimation.swift)| A visual representation of hearing/listening| ![Siri Amimation ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/siri.gif) | 

| [Now playing](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/RepresentActivity/SpotifyNowPlaying.swift) | A visual representation of audio signals/ now playing | ![Animated Placeholders ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/nowPlaying.gif) | 

| [Recording](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/RepresentActivity/RecordingAnimation.swift) | A visual representation of voice/speech recording | ![Turn-taking in chat ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/recording.gif) | 

---



### [Decoration](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/Decoration)

**ANIMATION AND MEANING:** Decoration



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

|  [Decoration](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/MeaningAndPurpose/Decoration) | Bubble and screen effects: confetti, fireworks, balloons | ![Decoration ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/decoration.gif)|  

---



## PRINCIPLES OF GREAT & PURPOSEFUL iOS ANIMATIONS

### [Anticipation](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/AnimationPrinciples)

**ANIMATION PRINCIPLE:** Anticipation



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

|  [Anticipation](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/AnimationPrinciples/AnticipationAnimation) | 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/anticipation.gif) |  

| [Staging](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/AnimationPrinciples/StagingAnimation) | 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/staging.gif) |  

---



### [Follow Through](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/AnimationPrinciples/FollowThroughAnimation/StreamChatReactions)

**ANIMATION AND MEANING:** Follow Through



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

|  [Reactions in Stream Chat](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/AnimationPrinciples/FollowThroughAnimation/StreamChatReactions) | 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](https://github.com/GetStream/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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/followThrough.gif)|  

---



### [Overlapping Action](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/AnimationPrinciples/OverlappingAction)

**ANIMATION AND MEANING:** Overlapping Action



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

|  [Cascading text animation](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/AnimationPrinciples/OverlappingAction/CascadingTextAnimation.swift) | 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/cascadingText.gif)|  

---



## Esing Functions

### [Easing](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/AnimationPrinciples/EasingsAndMeaning)



| SwiftUI Animation (Easing Type) | Timing Curve |  Usage | Example |

|---|---|---|---|

| [Default](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/AnimationPrinciples/EasingsAndMeaning/Default) | ![Default easing](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/AnimatedEasing/default.gif) | 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/default.gif) |

| [**Linear**: Dashes moving on a path](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/AnimationPrinciples/EasingsAndMeaning/Linear/StreamLogoMarchingAnts.swift) | ![Marching ants](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/AnimatedEasing/linear.gif) | 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/marchingAnts.gif) |

| [**Linear**: Dashes moving on a path](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/AnimationPrinciples/EasingsAndMeaning/Linear/MeasuringHeartRate.swift) | - | **Example**: Measuring Heart Rate animation| ![Heart rate ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/heartRate.gif) |

| [**Linear**: Rotation](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/AnimationPrinciples/EasingsAndMeaning/Linear/SunAndWind.swift) | - | **Example**: Rotational animation | ![Rotation ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/sunWind.gif) |

| [EaseIn](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/AnimationPrinciples/EasingsAndMeaning/EaseIn) | ![EaseIn example](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/AnimatedEasing/easeIn.gif) | 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/easeInExample.gif) |

| [EaseOut](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/AnimationPrinciples/EasingsAndMeaning/EaseOut) | ![EaseOut example](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/AnimatedEasing/easeOut.gif) | 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/easeOutExample.gif) |

| [EaseInOut](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/AnimationPrinciples/EasingsAndMeaning/EaseInOut) | ![EaseInOut example](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/AnimatedEasing/easeInOut.gif) | 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/easeInOut.gif) |

---



## Custom Timing Functions

### [Custom Timing Functions](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/AnimationPrinciples/EasingsAndMeaning)



| SwiftUI Animation (Easing Type) | Timing Curve |  Usage | Example |

|---|---|---|---|

| [Timing Functions](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/AnimationPrinciples/EasingsAndMeaning/CustomEasing/CustomEasing.swift) | ![Custom Timing Functions](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/AnimatedEasing/specialEaseInOutBack.gif) | 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/customTiming.gif) |

---



## 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](https://github.com/GetStream/purposeful-ios-animations/tree/main/PurposefulSwiftUIAnimations/BadAnimationExamples)



| SwiftUI Animation | Meaning/purpose |  Preview | 

|---|---|---|

|  [Bad notification animation](https://github.com/GetStream/purposeful-ios-animations/blob/main/PurposefulSwiftUIAnimations/BadAnimationExamples/BadNotificationAnimation.swift) | 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 ](https://github.com/GetStream/purposeful-ios-animations/blob/main/MISC/badNotification.gif) |  



### 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