Hi, I’m Kurt, I’m a technology evangelist on the Worldwide Developer Relations team, and I am so thrilled to be with you today and to welcome all the folks online to. Before joining Developer Relations, I worked as an engineer on SwiftUI where I focused on navigation and API design.

Today, I’ll talk about the foundations for introducing motion in your apps using SwiftUI. As devices have become more powerful, interfaces have grown more dynamic. This motion makes devices feel more alive and personal when done well. Motion makes apps and platforms easier to understand. It provides context and guides people’s attention. Plus, it’s just plain fun.

A lot comes together to make these dynamic interactions. There are transitions where people move from one view to another, like pushing into a view in the settings app, or presenting a sheet of focus options and gestures where people directly interact with the device, like zooming into a map to see more details or swiping between apps. And finally, animations where an on screen object moves, grows, or changes visual properties like live activities in the Dynamic Island. These all work together to create a fluid, interactive interface. SwiftUI is the best way to incorporate fluid motion in your apps.

Motion in SwiftUI spans the gamut. At the simplest, you get automatic transition transitions just by using the built in SwiftUI components. Level up with state driven animations, where you can choose from a menu of modifiers to tell SwiftUI how to animate when particular properties change or go all in with fully custom animations where you specify exactly what should happen frame by frame.

Today I’ll take you through examples from across this spectrum, so you can choose the right tool to create the dynamic moving experience that’s right for your apps. Many SwiftUI views provide smooth motion effects automatically. I’ll share some examples from the wishlist app and show how you can tweak these automatic effects to invoke the feeling you want in your apps.

Then I’ll discuss how you can add state driven animations to your app using SwiftUI. Modifiers and properties. I’ll present the foundations of these animations so you’re equipped to choose the right technique for the task at hand. Finally, I’ll illustrate the power of custom animations in SwiftUI and point you to some resources for learning more.

When you use built in views in SwiftUI, you get many motion effects automatically. This wish list app is a great example of this power. Navigation stacks push when someone taps a trip. Thumbnail symbols like check marks acknowledge interactions. Details pop back into thumbnails. Sheets animate into view. Pop up menus morph out of liquid glass buttons. Scroll views automatically accelerate when people swipe and decelerate when they stop swiping, optionally stopping on particular views. I’ll go through four different SwiftUI views you can use to get these motion effects automatically, starting with navigation stacks like this one in the wishlist tab that presents trip details.

The wishlist app uses a navigation stack inside each tab. Inside this stack are all these tiles for the various trips. I’ll focus on a for each that iterates over all the trips in a collection like my Fall Getaways. Each of these thumbnails is drawn by a navigation link that provides a destination view, plus a label. The label is the part of the interface that a person taps on.

When they do that, the destination view is pushed onto the stack. By default, it slides in from the trailing edge when they tap the back button or swipe on the display, the destination view animates away. Now some apps like Music and News, for example, refine these pushes and pops using a technique called zoom transitions.

There are just three steps to tell a navigation stack to use a zoom transition. First, add a namespace to the view’s properties. A namespace is a unique identifier that The SwiftUI can use to associate two other pieces of code. Second, add the navigation transition modifier to the destination view, passing the zoom parameter, a unique ID and the namespace. Finally, add the match transition source modifier to the links label.

Now the wishlist app uses a zoom transition when I tap on the image for a trip. When I navigate back, the detail view shrinks back into the thumbnail. Zoom transitions work great when the destination repeats content that’s included in the label, like this beautiful picture from Zion National Park.

Sometimes the label of the navigation link is more detailed, like this one from the search tab in wishlist. It shows a thumbnail photo next to the trips name. In a case like this. Add the matched transition source to a subview of the links label. Here’s how. These rows are drawn with a custom view named Search Item View. It uses an H stack containing the thumbnail and the trip name. Here I added the matched transition source modifier to the image thumbnail instead of the whole search item view.

I passed the namespace in from the surrounding navigation stack as a property. And now when I tap the row, the detail page zooms out of the thumbnail. When I pop back, the page zooms back into the thumbnail. I just love this little touch. It’s fun, and it draws a person’s eye to the row where they started from.

The second kind of built in view I’ll cover today is sheets. I’ll talk through the code for a sheet in the wish list app. Here’s the navigation stack for the Wish List tab again with the property is presenting add trip that I’ll use to determine if the sheet is showing. Inside the stack is a scroll view with a toolbar modifier attached.

Inside the toolbar is this plus button. With that structure in place, there are just two steps to present a sheet. First, the button in the toolbar sets the is presenting add trip property to true, and second, the sheet modifier specifies what should be shown when is presenting. Add trip is true.

The modifier here takes a binding to the property. That’s what the dollar sign means. Coal will go into more details on binding in a bit, but the important point now is that this lets SwiftUI set is presenting add trip back to false. When someone dismisses the sheet with these in place. When I tap the button, the sheet slides up from the bottom of the screen. When I tap the close button, it slides back down.

Just like it did for navigation, I can apply my three step process to convert this to a zoom transition. Two. So first I add a namespace to the view’s properties. Second, I add the navigation transition modifier to the sheets content, passing the zoom parameter. And finally I add the matched transition source modifier to the button label. Now when I tap the button, the sheet morphs out of it. When I dismiss the sheet, it morphs back home. This motion helps people associate the button with the sheet.

SwiftUI scroll views also provide built in motion effects. Scroll views move when people swipe on them with smooth deceleration and a friendly bounce at the end of the content. Here’s the scroll view for showing the badges I’ve earned in the Wish List app. Scroll view takes a subview showing the content that people can scroll through. Here, that’s a stack of the tiles showing all of my badges.

Optionally, scroll view takes the parameter specifying what directions it can scroll in. So horizontal here, for the badges in the wish list app, I want the scroll view to always stop with the badge centered on the screen. With just two steps. I can tell SwiftUI to do this.

First, I add the scroll target behavior modifier to tell SwiftUI to stop aligned to a view. Then I add the scroll target layout modifier to tell SwiftUI which stack of views I want to participate in this behavior. With that in place, now when I swipe on the badges, the scroll view always stops with a badge centered on the screen.

Now it would be fun. It would be fun to add some whimsy to these badges as they scroll in and out of the view. Apps like Books and sports use these sorts of motion effects. They do this with the scroll transition modifier. Apply the modifier to the view that you want to transform. Here. That’s my achieved goal tile. I make the transition interactive, so it responds to manual scrolling and set the direction to horizontal. The modifier takes a closure. Defining the transition. SwiftUI passes a proxy for the content plus an animation phase to the closure.

The phase specifies how far along the transition is minus one for completely scrolled away on the leading edge, zero for completely on screen, and plus one for completely scrolled away on the trailing edge. Use the phase to modify the content. Here I’m scaling down the goal tile when it moves off screen and applying a 3D rotation along the vertical axis. Check it out. Notice how the views seem to wrap at the edges as if they’re part of a round carousel? That’s good stuff.

The last kind of built in view I’ll cover today is an image view with SF symbols. Like Mojo said earlier, SF symbols is a library of iconography with more than 7000 symbols. There are no duplicates on this screen. SF symbols are designed to integrate seamlessly with San Francisco. The system font on Apple’s platforms.

The SF symbols app for Mac, available from the Apple Developer website, allows you to explore the library and find the right symbol for your use case. For example, the Wish List app uses a check mark in its activities list to add the check mark in my own app. I add a SwiftUI image to my code in the SF symbols app. I control click on the symbol I want, check mark, circle fill, and choose Copy Name.

Then in Xcode, I paste the name into my image declaration and there’s my check mark. SwiftUI provides several different ways to animate SF symbols. I’ll share three examples. Use an indefinite effect to indicate an ongoing operation, like waiting for someone to send a reply in a chat. These effects run continuously while active. Some examples are variable, color, scale, and breathe effects. To add one of these effects to an SF symbol. Use the symbol effect modifier with an is active parameter. Whenever this argument value is true, the effect will run.

Use a discrete effect for indicating an event like a download. Completing. These effects are triggered when the event occurs. Some examples are bounce, pulse, and wiggle. To add one of these effects to an SPH symbol, use the symbol effect modifier with the value parameter. Whenever this argument value changes, the effect will run. Use a content transition effect when replacing one symbol with another, such as when adding a check mark to a circle.

To add one of these effects to an SPH symbol, use the content transition modifier with the symbol effect type. The transition will run whenever the chosen symbol changes. The SF symbols app also lets you you experiment with animations. Here I switch to the animation inspector. Select a breathe animation and set it to run. Once I click play to test it. Then I copy the animation configuration using the copy menu.

Back in Xcode, I paste the modifier with the options I configured in the SF symbols app. And breathe in and out. Swiftui’s. Built in views like stacks, sheets, scroll views, and images give you a variety of built in effects. Automatically add modifiers to refine those effects for your app.

Next, I’ll introduce another kind of animation in SwiftUI state driven animations. I’ll explain. Earlier, Leah shared how SwiftUI views map from data to pixels on screen. And Cat showed an example of a view being shown or hidden in the wish list layout based on the value of a property in the data model. Data that’s used this way is called the view’s state.

Here’s an example from the wishlist app. This is a Trip details view with a list of my planned activities at the bottom. Floating over this image is this text that shows what percentage of my activities I’ve completed, plus a bar that fills in as I complete more of them. When I check off an activity, SwiftUI updates the associated state to record that the activity is done. The views that depend on this state automatically update when the state changes.

For now, all the changes happen instantaneously when I check off an activity. I’ll tell SwiftUI to animate this instead. Do that with the with animation function. Here’s how. Here’s the code for the button that presents. That represents an activity on the Trip Details page. The action of this button toggles the is completed state of the associated activity.

I wrap this toggling action in the with animation function. This tells SwiftUI to animate any view updates that happen as a result of the wrapped state changing. Here’s the update again. Now when I complete an activity, the percentage text crossfades the bar fills and the activity color and check mark crossfade. To animate these changes I just added with animation. The rest happens automatically.

The power of with animation is its simplicity. Just wrap a state change in the function and every property of your views that depend on that state and can be animated will be. On the other hand, some parts of your app might need a more precise approach to describe that. I’ll focus on just this completion overlay from the Wish List app.

In the app. These three views the percent complete text, the bar and the subtitle are embedded in a custom activity progress view. I’m going to leave out a few styling modifiers, plus the subtitle to focus on the animations. Activity progress view takes a completion value property between 0 and 1. Describing the percent complete. A text view with formatting renders the completion percentage. This opacity modifier hides the text when the completion value is zero.

I use a rounded rectangle for the lime green bar. The width of the bar is set by multiplying a constant bar width by the completion value. And again, an opacity modifier hides the view when the completion value is zero. Now the design for wish list calls for animating the activity progress view wherever it’s used. I can use the animation modifier for that.

By applying the animation modifier to this Vstack. I tell SwiftUI to animate these views whenever the passed in completion value changes. Here’s how that behaves so far. It’s exactly the same animation as I got using with animation. The animation modifier is an alternative to using with animation. At the point the state changes with. Animation is a good choice when you want some, but not all sources of a state change to trigger an animation.

On the other hand, use animation modifier when you want a view to always animate regardless of the source of the state change both with animation and the animation modifier let you change the timing of an animation, its velocity, acceleration, and bounce. Use this to take more control over the feel of the animation.

For example, it would add a touch of celebration if the bar bounced a bit when it increased. I can do that by passing bouncy to the animation modifier. Here’s what that looks like. The green bar oscillates just a bit before settling to its new value. I can even add some extra bounce. Check out what happens now. The bar has a fun bounce. But there’s something wonky with the text, so I’ll run that again and freeze during the animation.

My extra bouncy animation shoots past the target value, then retreats towards the original before finally settling. And with the numbers. This retreat is far enough that the digits start fading back to their starting values. I can solve this by adding a second animation modifier. I add a smooth animation to just the text view. Now the bouncy animation applies to the whole vstack, but I override that animation just for the text Subview. Now the glitch with the numbers is gone. The bar bounces, but the numbers crossfade smoothly.

Now that that’s sorted, I’ll dial the bar, bounce back a bit, and add one more motion effect to the text. The content transition modifier with the numeric text argument tells SwiftUI to use a special counter animation when the numbers change. Now the digits roll up in order, calling attention to the change. I love that one.

Summing up, SwiftUI views map from data to pixels. State driven animations let you control the behavior when the pixels update as the result of this data or state changing. Specify how those animations should behave by either wrapping the actual state change in the width animation function, or by adding an animation modifier to the views. Now, before moving on, I’ll share just a bit about the optional parameter I use to control the bounciness of the bar animation.

This optional parameter controls the timing of the animation. Here’s what I mean. I use the bouncy animation for the bar. The animation overshoots its destination before easing back. It’s the most playful of the built in animations on a plot of value versus time, the value overshoots before settling to its final level. On the other hand, the snappy animation moves quickly to its final value, giving a feel of precision and professionalism.

The plot shows a distinct knee where the value reaches its final level. The smooth animation sits at a sweet spot between bouncy and snappy. It settles quickly, but feels more casual than a snappy animation. It has a gentler bend and approaches its final level more gradually. Smooth is a great general purpose animation. In fact, it’s the default on all of Apple’s platforms.

Finally, use the spring animation to customize all the properties of a spring. This gives you fine grained control. Tune the bounce to control the playfulness of the animation. At a bounce of 0.6, The value oscillates multiple times before finally settling. You can also tune the duration of the spring and even how it interacts with other spring driven animations.

Typically, one of the named spring’s bouncy, snappy, or smooth will be appropriate, but it’s nice to know you have control if you need it. For more details on how animations and SwiftUI work under the hood, check out explore SwiftUI animation. Then bounce over to animate with springs for technical and design guidance on animation timing.

Both videos are from UB 23. I’ve shared how the wishlist app uses SwiftUI built in views to get beautiful motion effects automatically, and how the app uses state driven animations to add an extra touch of polish. I’ll wrap up with a couple of examples of custom effects built with SwiftUI.

These examples aren’t in the wish list app today, but I’ll explain how you can add them. Experimenting like this is a great way to get a feel for what’s possible in SwiftUI. My first example is a bouncing ball. This might work as a loading indicator. Implement this using a phase animator. This animation has four phases. First, the ball drops.

Then it squishes. That’s a technical term. The ball expands again and then it rises. This cycle repeats. An enum is a great way to define the phases for a phase animator. So drop, squish, expand, and rise for this example. Then add properties for each of the attributes you want to animate. For this example, first add the y offset the properties. Return the value at the end of each phase. At the end of the rise, the ball is 40 points higher than its original position. At the end of the squish, the ball is five points lower.

At the end of the other two phases, the ball is in its original position. Next, add a property for the ball’s scale. When squished, the ball is a bit wider and a bit shorter than its normal shape. Otherwise it’s round. After defining the phases, add a phase animator to a view.

Make the animator iterate over all the phases by conforming your enum to case iterable and passing all cases to the phase animator. SwiftUI will call the first closure of the animator, passing each phase in turn. So drop, shrink, expand, and rise. Next, draw the animated view here. That’s the circle. Then apply modifiers reading the arguments from the phase.

Here I’m offsetting by the phases y offset value and scaling by the phases scale value. Finally, in the second closure, define the animation that should be used during each phase. Here I’m using ease in animations for drop and expand. These are slow at the beginning and fast at the end. And I’m using ease Out for squish and rise.

Those are the four steps for building a phase animation in SwiftUI. Define the phases for each animated property. Define the value at the end of each phase. Draw your view applying animated effects and finally, specify the animation for each phase. To learn more about phase animators, check out. Wind Your way through Advanced Animations in SwiftUI from Dub Dub 23. The second custom effect I’ll share is a transition to celebrate a person earning a badge in wish list.

This effect is cool, but fast, so I’ll play it again. SwiftUI can apply a transition when you add or remove a view or replace one with another. This badge transition has two major steps. First, write code to replace one view with another. Here, I’ll start with a grayscale version of the badge and then replace it with the colored version. Create a group to hold the before and after images inside the group. Use an if to show the colored image. If the badge is earned or a grayscale copy of it. Otherwise. Now setting is earned to true will replace the gray badge with the colored one.

The second step is to animate this replacement. To do this, add a transition modifier to the group. This tells SwiftUI to apply a motion effect when the view’s inside the group are swapped. There’s some built in transitions that you could use here, like opacity or scale. But to make the badge flip, use a custom transition.

Create a custom transition by declaring a struct that conforms to the transition protocol. The transition protocol has just one requirement a body method like the scroll transition modifier I shared earlier. The body of a custom transition takes a content parameter. This is a proxy for the view that’s being added or removed. The body also takes a phase which tells you whether the view is appearing or disappearing.

Inside the body, apply effects to the content proxy using the phase as a condition. The phase has a property is identity. That’s true when the view is visible. So to flip the badges, apply a rotation 3D effect with no rotation when phase is identity. Otherwise 180 degrees positive or negative, depending on whether the view is appearing or disappearing.

Apply an opacity modifier to gradually hide or show the badge during the flip. With the custom transition defined. Pass an instance of it to the transition modifier. Now when I toggle is earned inside A with animation block, the gray badge animates out and the colored badge animates in. Using the custom flip transition.

To learn more about creating custom motion effects in your apps, I recommend the video. Create custom visual effects with SwiftUI from W 24. And for design guidance, check out the motion section of the Human Interface Guidelines on developer.apple.com. As you consider where to use motion effects in your apps, use SwiftUI. Built in views and controls, these give you a variety of motion effects.

Automatically add modifiers to refine those effects. For your app, use state driven animations to react to events and guide people’s attention to what’s important. Set your app apart with a carefully chosen set of custom animations. Thanks for joining me on this tour of motion effects in SwiftUI. I hope it’s helped you understand what’s possible using SwiftUI.