SwiftUI Card Animations

SwifUI.swift

import SwiftUI

struct ContentView: View {
    @State var show = false

    var body: some View {
        ZStack {
            TitleView()
                .blur(radius: show ? 20 : 0)
                .animation(.default)

            BackCardView()
                .background(Color("card3"))
                .cornerRadius(20)
                .shadow(radius: 20)
                .offset(x: 0, y: show ? -400 : -40)
                .scaleEffect(0.9)
                .rotationEffect(Angle(degrees: show ? 0 : 10))
                .rotation3DEffect(Angle(degrees:10), axis: (x: 10.0, y: 0, z: 0))
                .blendMode(.hardLight)
                .animation(.easeInOut(duration: 0.5))

            BackCardView()
                .background(Color("card4"))
                .cornerRadius(20)
                .shadow(radius: 20)
                .offset(x: 0, y: show ? -200 : -20)
                .scaleEffect(0.95)
                .rotationEffect(Angle(degrees: show ? 0 : 5))
                .rotation3DEffect(Angle(degrees:5), axis: (x: 10.0, y: 0, z: 0))
                .blendMode(.hardLight)
                .animation(.easeInOut(duration: 0.3))

            CardView()
                .background(Color.blue)
                .cornerRadius(20)
                .shadow(radius: 20)
                .blendMode(.hardLight)
                .onTapGesture {
                        self.show.toggle()
                }
    
            BottomCardView()
                .offset(x: 0, y: show ? 2000 : -20)
                .animation(.easeInOut(duration: 0.5))
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct CardView: View {
    var body: some View {
        VStack() {
            HStack() {
                VStack {
                    VStack(alignment: .leading) {
                        Text("Repositories")
                            .font(.title)
                            .foregroundColor(.white)
                            .fontWeight(.semibold)
                        Text("Open Source Code")
                            .foregroundColor(Color("accent"))
                    }
                }
                Spacer()
                Image(systemName: "cube.box.fill")
                    .foregroundColor(.white)
                    .font(Font.system(.largeTitle))
            }
            .padding()
            Spacer()
            Image("repositories").resizable().aspectRatio(contentMode: .fit).cornerRadius(20)
        }
        .frame(width: 340.0, height: 240.0, alignment: .topLeading)
        .background(Color.black)
        .cornerRadius(20)
        .shadow(radius: 20)
    }
}

struct BackCardView: View {
    var body: some View {
        VStack {
            Spacer()
            
        }
        .frame(width: 340.0, height: 240.0, alignment: .topLeading)
    }
}

struct TitleView: View {
    var body: some View {
        VStack {
            HStack {
                Text("GitHub Explorer")
                    .font(.largeTitle)
                    .fontWeight(.semibold)
                Spacer()
            }.padding()
            Image("development")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .opacity(0.4)
                .padding()
            Spacer()
        }
    }
}

struct BottomCardView: View {
    var body: some View {
        VStack(spacing: 20) {
            Rectangle()
                .frame(width: 40, height: 5)
                .cornerRadius(3)
                .opacity(0.1)
            Text("Jacob has over 1000 repositories!")
                .multilineTextAlignment(.center)
                .font(.subheadline)
                .lineSpacing(4)
            Spacer()
        }
        .padding(.top, 8)
        .padding(.horizontal, 20)
        .frame(maxWidth: .infinity)
        .background(Color.white)
        .cornerRadius(30)
        .shadow(radius: 20)
        .offset(x: 0, y: 500)
    }
}