How to Create Custom Transitions in iOS 18 - #30DaysOfSwift

Day 10: Smooth as Butter Transitions 🌀

In the tenth post of the #30DaysOfSwift series, we’re diving into Custom Transitions and Animations to create seamless page/view transitions in SwiftUI.

With SwiftUI’s built-in animation tools, you can give your app a smooth, polished look when users navigate between different views.

Steps to Create Custom Transitions:

Set Up the Views and Transitions: Start by making two views: a home screen and a detail screen, and animate the transition between them using a custom transition.

import SwiftUI

struct CustomTransitionsView: View {
    @State private var showDetailView = false

    var body: some View {
        ZStack {
            if showDetailView {
                DetailView()
                    .transition(.move(edge: .trailing)) // Custom transition
                    .zIndex(1) // Ensure this view is in front during transition
            } else {
                HomeView()
                    .transition(.move(edge: .leading)) // Custom transition
            }
        }
        .animation(.easeInOut(duration: 0.5), value: showDetailView) // Smooth animation
        .onTapGesture {
            // Toggle between views on tap
            withAnimation {
                showDetailView.toggle()
            }
        }
    }
}

struct HomeView: View {
    var body: some View {
        VStack {
            Text("Home Screen")
                .font(.largeTitle)
                .fontWeight(.bold)

            Image(systemName: "house.fill")
                .font(.system(size: 80))
                .foregroundColor(.blue)
        }
    }
}

struct DetailView: View {
    var body: some View {
        VStack {
            Text("Detail Screen")
                .font(.largeTitle)
                .fontWeight(.bold)

            Image(systemName: "magnifyingglass")
                .font(.system(size: 80))
                .foregroundColor(.green)
        }
    }
}

How are you going to use it? Let me know :)

Happy Coding!