DEV Community

Cover image for Custom Transitions in iOS 18 - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi

Posted on

Custom Transitions in iOS 18 - #30DaysOfSwift

Day 10: Smooth as Butter Transitions 🌀

In the tenth post of #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)
        }
    }
}

Enter fullscreen mode Exit fullscreen mode

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

Happy Coding!

Billboard image

The fastest way to detect downtimes

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitoring.

Get started now

Top comments (0)

Retry later