Creating Purposeful iOS Animations

Discover great iOS animations and train your eyes to identify bad ones. Learn the meaning and purpose behind great iOS animations and adopt key animation principles to assist you to elevate your apps with satisfying animation experiences.

Transcript

1. G E T S T R E A M . I O Creating Purposeful iOS Animations/Motion
2. G E T S T R E A M . I O Amos Gyamfi • iOS Developer Advocate @getstream.io • Switched into developer relations from design • Twitter: @amos_gyamfi • Contribute to GitHub repos: 
 - Purposeful SwiftUI Animations 
 - Swiftui Spring Animations 
 - SwiftUI Animation Challenges 
 - Effects-library 
 - MotionScape
3. G E T S T R E A M . I O Stream Chat • Free In-App Messaging SDK & UI Kits for iOS/Swift • The easiest way to add messaging to your iOS apps, 
 in days — not months • High-level UI Components • Connect the Stream Chat API with minimal coding • Developer toolkit for activity feeds • Get started with a free 30-day trial! • We’re hiring: See positions www.getstream.io
4. G E T S T R E A M . I O Why are we here? ☯ We like nice animations, but there are also bad ones 🧠 Best practices 🆒 How to make your apps better with animations 🫵 Show examples and discuss why they are good/bad
5. G E T S T R E A M . I O How can I build great animations myself? 🤔 How to build animations with e.g. SwiftUI 🏎 How things (should) move ⏰ Timing, easing, and pacing
6. G E T S T R E A M . I O ⚠ Disclaimer
7. G E T S T R E A M . I O Why? A N I M AT I O N S
8. G E T S T R E A M . I O Meaning Purpose +
9. G E T S T R E A M . I O A N I M AT I O N S M E A N I N G + P U R P O S E Delight and Playfulness
10. GETSTREAM.IO G E T S T R E A M . I O State Change A N I M AT I O N S M E A N I N G + P U R P O S E
11. G E T S T R E A M . I O Draw Attention A N I M AT I O N S M E A N I N G + P U R P O S E
12. G E T S T R E A M . I O Draw Attention A N I M AT I O N S M E A N I N G + P U R P O S E
13. G E T S T R E A M . I O Guide Users: Replaces telling with showing A N I M AT I O N S M E A N I N G + P U R P O S E
14. G E T S T R E A M . I O A N I M AT I O N S M E A N I N G + P U R P O S E Natural Realistic Credible
15. G E T S T R E A M . I O A N I M AT I O N S M E A N I N G + P U R P O S E Launch screen animations Feedback and Hinting
16. G E T S T R E A M . I O A N I M AT I O N S M E A N I N G + P U R P O S E Typing indicators in chat Feedback and Hinting
17. G E T S T R E A M . I O A N I M AT I O N S M E A N I N G + P U R P O S E Augment Feeling
18. G E T S T R E A M . I O Express Gratitude A N I M AT I O N S M E A N I N G + P U R P O S E
19. G E T S T R E A M . I O A N I M AT I O N S M E A N I N G + P U R P O S E Intrinsic Motivation
20. G E T S T R E A M . I O A N I M AT I O N S M E A N I N G + P U R P O S E Scroll in this direction Invitation to Act
21. G E T S T R E A M . I O A N I M AT I O N S M E A N I N G + P U R P O S E Representation of Activities
22. G E T S T R E A M . I O Bad Examples A N I M AT I O N S
23. G E T S T R E A M . I O B A D A N I M AT I O N E X A M P L E S Forever rotating spinner Animation that makes users wonder
24. G E T S T R E A M . I O
25. G E T S T R E A M . I O B A D A N I M AT I O N E X A M P L E S Distracting and gets in the way of completing task Hijacking users’ attention
26. G E T S T R E A M . I O B A D A N I M AT I O N E X A M P L E S Using wrong parameters
27. G E T S T R E A M . I O B A D A N I M AT I O N E X A M P L E S Using right parameters
28. G E T S T R E A M . I O B A D A N I M AT I O N E X A M P L E S Disoriented animation
29. G E T S T R E A M . I O B A D A N I M AT I O N E X A M P L E S Oriented animation
30. G E T S T R E A M . I O B A D A N I M AT I O N E X A M P L E S Springy animation in a context that feels out of place Overusing spring animations
31. G E T S T R E A M . I O B A D A N I M AT I O N E X A M P L E S Right easing for the right animation Using linear animations
32. G E T S T R E A M . I O Principles of great iOS Animations A N I M AT I O N S
33. G E T S T R E A M . I O P R I N C I P L E S O F G R E AT I O S A N I M AT I O N S Anticipation Give users a sense of what is about to happen App Store card expansion: Signals the card is about to expand by slightly scaling down. Usage: Thumbnail image to fullscreen transition
34. G E T S T R E A M . I O P R I N C I P L E S O F G R E AT I O S A N I M AT I O N S Staging Direct users’ attention to focus on the important elements on the screen Number changes in count down or count up timers Instantly changing 0 to 100, it is easy to miss what just changed.
35. G E T S T R E A M . I O P R I N C I P L E S O F G R E AT I O S A N I M AT I O N S Follow through using Spring Animations Follow the principle of physics to create soft and imprecise movements Overshooting resting states Reactions: Telegram, iMessage, Stream’s SwiftUI sample app
36. G E T S T R E A M . I O P R I N C I P L E S O F G R E AT I O S A N I M AT I O N S Overlapping Action Occurs along with the primary motion Cascading and offsetting similar elements animating in the same way. Cascading text animation
37. G E T S T R E A M . I O Easing Meaning + Use-cases
38. G E T S T R E A M . I O Linear EaseIn EaseOut EaseInOut Default Custom Easing
39. GETSTREAM.IO G E T S T R E A M . I O Linear Constant speed No acceleration, no deceleration Mechanical rather than natural
40. G E T S T R E A M . I O Applications Linear Rotation Path properties
41. G E T S T R E A M . I O Does not slow down or speed up Marching Ants Applications Linear
42. G E T S T R E A M . I O Timelapse Ken Burns Effect for photos Opacity Color changes Camera effects Applications - More Linear
43. GETSTREAM.IO G E T S T R E A M . I O EaseIn Velocity increases over time Auto-initiated animations Move objects off the screen ❌ Opacity and scale
44. G E T S T R E A M . I O Application EaseIn Object Loosing attention
45. GETSTREAM.IO G E T S T R E A M . I O EaseOut Velocity decreases over time Move objects onto the screen Human-initiated interactions
46. G E T S T R E A M . I O Application EaseOut Object gaining attention
47. G E T S T R E A M . I O Button taps Page-to-page transition Applications - More EaseOut
48. GETSTREAM.IO G E T S T R E A M . I O EaseInOut Slow, accelerate, slow On-screen movement Pingpong / to-and-fro motion
49. G E T S T R E A M . I O Applications EaseInOut Scaling + Rotation Breathe animation
50. GETSTREAM.IO G E T S T R E A M . I O Default Starts quickly to full speed Similar to EaseInOut Mimics most system animations Better for onscreen animations
51. G E T S T R E A M . I O Application Default Shape & Numbers
52. GETSTREAM.IO G E T S T R E A M . I O Describe acceleration and deceleration Unique look-and-feel Custom Easing Timing Curves
53. G E T S T R E A M . I O Sinusoidal Circular Exponential Special effects easeInOutSine easeInCirc easeInExpo easeInOutBack Custom Easings Examples
54. GETSTREAM.IO G E T S T R E A M . I O Sinusoidal Gentle animations
55. G E T S T R E A M . I O Application Sinusoidal iMessage: Gentle bubble effect
56. GETSTREAM.IO G E T S T R E A M . I O Circular Dramatic acceleration
57. G E T S T R E A M . I O Application Circular iMessage: Slam bubble effect
58. GETSTREAM.IO G E T S T R E A M . I O Exponential Fast Energetic Exaggerated
59. G E T S T R E A M . I O Application Exponential iMessage: Loud bubble effect
60. GETSTREAM.IO G E T S T R E A M . I O Beyond the start and end position Special effects easeInOutBack
61. GETSTREAM.IO G E T S T R E A M . I O Example: Image transition Special effects easeInOutBack
62. G E T S T R E A M . I O ⚠ Shameless promo
63. GETSTREAM.IO G E T S T R E A M . I O Create Experiment Learn MotionScape
64. G E T S T R E A M . I O Timing and Pacing Mass and Weight
65. G E T S T R E A M . I O Time between fromValue and toValue Timing relates to duration Pacing relates to speed Differentiate great animations from terrible ones Not slower or faster than it should be Timing and Pacing
66. G E T S T R E A M . I O 🤔
67. GETSTREAM.IO G E T S T R E A M . I O Immediate Fast Slow Intentional 100ms 300ms 400ms 600ms Duration Starter Pack
68. G E T S T R E A M . I O Timing and Pacing Mass and Weight
69. G E T S T R E A M . I O Weight of the object Changes the object’s inertial Willingness to move or stop moving Overshoot with heavy mass Mass and Weight
70. G E T S T R E A M . I O Example Facebook Messenger reactions
71. G E T S T R E A M . I O Best Practices i O S A N I M AT I O N S
72. G E T S T R E A M . I O Nimble and Precise Accessibility Guidelines Reduce motion System Components
73. G E T S T R E A M . I O Convey information more effectively Do not keep users waiting longer Example: Loaders should not run forever Food delivery example Animations should be nimble and precise
74. G E T S T R E A M . I O Screen flashing can cause headache and seizure Excessive motion can cause discomfort, dizziness Example: Parallax, sliding animations Follow basic accessibility guidelines
75. G E T S T R E A M . I O Ability to turn off some animations and motion effects How it works: Dissolve effect instead of zoom/slide. Disables parallax effects, wallpaper, rain, snow, animations, etc Detection: Via Environment variable (accessibilityReduceMotion) Reduce motion
76. G E T S T R E A M . I O Excellent Example iOS Weather app Whether animations disabled Reduce motion: On
77. G E T S T R E A M . I O Great Example Telegram iOS Reaction animations disabled Reduce motion: In app
78. G E T S T R E A M . I O Worth mentioning: PCalc 
 Option to turn off scaling animation of buttons Settings 
 Turn on/off animations, effects, and custom transitions Reduce motion: In-app
79. G E T S T R E A M . I O Already include motion Familiar and consistent UX Need custom motion? ❌ Overwhelm users 😵💫 Keep users oriented 🙋 Feedback to user’s actions Use System Components
80. G E T S T R E A M . I O Where do I start from? How can I build great animations myself?
81. G E T S T R E A M . I O Static assets: Sketch or Figma Timeline tool for Core Animation: Kite Compositor Recreate Kite animations in Xcode: SwiftUI Build into the actual app How to build better iOS animations
82. G E T S T R E A M . I O Recap Most important principles i O S A N I M AT I O N S
83. G E T S T R E A M . I O Follow basic accessibility guidelines Reduce Motion 
 Turning off animation and motion effects Recap Accessibility
84. G E T S T R E A M . I O Helps to convey information more effectively ❌ Do not keep users waiting longer. Recap Nimble and precise animations
85. G E T S T R E A M . I O Does it provide any useful information? What emotional response does it convey? Is it supposed to establish a relationship between elements? What if the user’s reduced motion setting is on? Will springiness/bounciness feel out of place? Avoid adding custom animation/motion to frequently occurring interactions Recap Define the goal and purpose
86. G E T S T R E A M . I O Think before you animate
87. G E T S T R E A M . I O Where do I go from here? Github repos Purposeful iOS Animations SwiftUI Spring Animations Cheat Sheet Stream SwiftUI Animation SwiftUI Animation Challenges MotionScape
88. G E T S T R E A M . I O References Human Interface Guidelines Principles of motion Animation choreography The Role of Animation and Motion in UX Motion sickness: Nausea Creating usability with motion Understanding the intuition of easing Reduce screen motion on Apple devices Responsive design for motion Easings.net
89. G E T S T R E A M . I O gstrm.io/iOSDevUK-slides
90. G E T S T R E A M . I O Thank You.