How to delay an animation in SwiftUI

When working with animations in SwiftUI, we sometimes need to delay an animation, for example when showing a UI element to users and then hiding it after a certain amount of time.

Let's jump right in and see how to do that.

Architecture & Design Patterns for iOS

This book is a practical guide to essential architectural principles and design patterns for iOS development. It covers strategies for building maintainable apps with Swift and SwiftUI, including dependency injection, navigation, common patterns, and modularization.

LEARN MORE

Let's look at the following example:

@State private var offset = -60.0 // 1.

var body: some View {
    ErrorView()
        .offset(y: offset)
        .onAppear {
            // 2.
            withAnimation(.bouncy) {
                offset = 60.0
            } completion: {
                // 3.
                withAnimation(.bouncy) {
                    offset = -60.0
                }
            }
        }
}

What we do in the code above is:

1. Setting the initial offset of the view out of screen bounds so it's not visible at first.
2. As soon as the view appears, we animate it to a different offset so it becomes visible on the screen.
3. As soon as the animation is completed, we animate the view back to a non-visible offset.

What is missing in the example is a delay, so the view stays on the screen for a few seconds before bouncing back.

Since delays are built-in into SwiftUI animations, we can achieve this with one simple call. All we need to do is to add a delay to our second animation:

withAnimation(.bouncy.delay(3))