Hi Devs. I was studying custom transitions.

struct CornerRotateModifier: ViewModifier {
    let amount: Double;
    let anchor: UnitPoint;

    func body(content: Content) -> some View {
        content
            .rotationEffect(.degrees(amount), anchor: anchor)
            .clipped()
    }
}

extension AnyTransition {
    static func pivot(withDelay delay: Double = 0.0) -> AnyTransition {
        .asymmetric(
            insertion: .modifier(
                active: CornerRotateModifier(amount: -90, anchor: .topLeading),
                identity: CornerRotateModifier(amount: 0, anchor: .topLeading)
            )
            .animation(
                Animation.easeInOut(duration: 0.5)
                .delay(delay)
            ),
            removal: .identity
        )
    }
}

struct ContentView: View {
    @State private var isShowingRed = false

    var body: some View {
        ZStack {
            Rectangle()
                .fill(.blue)
                .frame(width: 200, height: 200)

            if isShowingRed {
                Rectangle()
                    .fill(.red)
                    .frame(width: 200, height: 200)
                    .transition(.pivot(withDelay: 1))
            }
        }
        .onTapGesture {
            withAnimation {
                isShowingRed.toggle()
            }
        }
    }
}

This code works fine if there is .identity in removal in AnyTransition extension. I want to same animation when removing element but in reverse. But when I add same modifier as above with reverse values, its not working. It is behaving wierd when double tapping. Can anyone please help me understand where am I wrong here.

Thanks.

@davidclarks I tried the code you gave and it is now working correctly for insertion animation. but when i click again, it just disappears rather than playing exit animation. how do i make that work?