# withAnimation in SwiftUI

Animations are an important part of modern app development. They can make your app more engaging, intuitive, and fun to use. SwiftUI, Apple's new declarative UI framework, provides a range of powerful tools for creating fluid and dynamic animations. In this blog post, we'll explore how SwiftUI `withAnimation` work and how you can use it in your own projects.

The code in this post is available [here](https://github.com/xavier7t/iOSDevX/tree/main/iOSDevX/202304-Apr%202023/withAnimation).

### **The basics of withAnimation**

In SwiftUI, `withAnimation` is a function that takes a closure that contains the changes you want to animate. The closure can contain any kind of view manipulation, such as changing the position or opacity of a view.

Here's a simple example that shows how to animate a button when it's tapped:

```swift
struct ContentView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        Button("Tap me to enlarge!") {
            withAnimation {
                self.scale *= 1.5
            }
        }
        .scaleEffect(scale)
    }
}
```

In this example, we first declare a state property called `scale`, which is used to control the size of the button. When the button is tapped, we use `withAnimation` to animate the `scale` property. The `scaleEffect` modifier is then used to apply the scale factor to the button.

Compare the following three screenshots to see the animation:

1-Original

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681793341585/80519d6f-31f5-4ce4-baee-786add831aed.png align="center")

2-Tapped once

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681793349510/1f4187f6-0c9e-4f46-820e-2a5d5ad0fb1c.png align="center")

3-Tapped twice

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681793357643/a820891e-4167-43e2-b4cc-a9ae3d478909.png align="center")

### **Animating view transitions**

One of the most common uses of animations in app development is to animate transitions between views. SwiftUI makes this task incredibly easy with its built-in support for view transitions.

To animate a view transition in SwiftUI, you simply need to use one of the built-in transition modifiers. There are several different transition modifiers to choose from, such as `opacity`, `move`, and `scale`.

Here's an example that shows how to animate a transition between two views:

```swift
struct ContentView2: View {
    @State private var showDetails = false
    
    var body: some View {
        VStack {
            Button((showDetails ? "Hide" : "Show") + " details") {
                withAnimation {
                    self.showDetails.toggle()
                }
            }
            if showDetails {
                Text("Here are some details")
                    .transition(.opacity)
            }
        }
    }
}
```

In this example, we use the `showDetails` state property to control whether the details view is shown or hidden. When the "Show details" button is tapped, we use `withAnimation` to animate the `showDetails` property. The details view is then shown or hidden using the `if` statement.

The `transition` modifier is used to animate the opacity of the details view. When the view appears or disappears, it fades in or out.

1. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681793651160/8eef294f-268a-420b-9eeb-7aa1eb4bea11.png align="center")
    
2. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681793665789/4389fbe0-0438-4c13-94fe-d567b80b9a76.png align="center")
    

You can also replace the transition value `.opacity` to `.scale`, `.slide` or `.identity` to feel the different types of transition in the preview or the simulator.

### **Conclusion**

Animations are an essential part of modern app development, and SwiftUI makes it easy to create fluid and dynamic animations. In this blog post, we've explored some of the basics of SwiftUI animations and how to use them to create engaging and intuitive user interfaces.

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!