Loading repository data…
Loading repository data…
GetStream / repository
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.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
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.

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 |
![]() |
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 | ![]() |
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. | ![]() |
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. | ![]() |
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. | ![]() |
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 |
ANIMATION AND MEANING: Express Gratitude
| SwiftUI Animation | Meaning/purpose | Preview |
|---|---|---|
| Express Gratitude | Expressing gratitude. For example, Medium’s Cumulative Clap Reaction | ![]() |
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. | ![]() |
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 ](https://github.com/GetStream |