Animation Between Screens

Author: Mithun

DesignCode/Home.swift

@@ -11,12 +11,24 @@ import SwiftUI
 struct Home: View {
 
    @State var show = false
+   @State var showProfile = false
 
    var body: some View {
       ZStack {
-         Button(action: { self.show.toggle() }) {
-            Text("Open Menu")
-         }
+         ContentView()
+            .background(Color.white)
+            .cornerRadius(30)
+            .shadow(radius: 20)
+            .animation(.fluidSpring())
+            .offset(y: showProfile ? 40 : UIScreen.main.bounds.height)
+
+         MenuButton(show: $show)
+            .offset(x: -30, y: showProfile ? 0 : 80)
+            .animation(.fluidSpring())
+
+         MenuRight(show: $showProfile)
+            .offset(x: -16, y: showProfile ? 0 : 88)
+
          MenuView(show: $show)
       }
    }
@@ -90,3 +102,61 @@ struct MenuView: View {
       }
    }
 }
+
+struct CircleButton: View {
+
+   var icon = "person.crop.circle"
+
+   var body: some View {
+      return HStack {
+         Image(systemName: icon)
+            .foregroundColor(.black)
+      }
+      .frame(width: 44, height: 44)
+      .background(Color.white)
+      .cornerRadius(30)
+      .shadow(color: Color("buttonShadow"), radius: 20, x: 0, y: 20)
+   }
+}
+
+struct MenuButton: View {
+   @Binding var show: Bool
+
+   var body: some View {
+      return ZStack(alignment: .topLeading) {
+         Button(action: { self.show.toggle() }) {
+            HStack {
+               Spacer()
+
+               Image(systemName: "list.dash")
+                  .foregroundColor(.black)
+            }
+            .padding(.trailing, 20)
+            .frame(width: 90, height: 60)
+            .background(Color.white)
+            .cornerRadius(30)
+            .shadow(color: Color("buttonShadow"), radius: 20, x: 0, y: 20)
+         }
+         Spacer()
+      }
+   }
+}
+
+struct MenuRight: View {
+
+   @Binding var show: Bool
+
+   var body: some View {
+      return ZStack(alignment: .topTrailing) {
+         HStack {
+            Button(action: { self.show.toggle() }) {
+               CircleButton(icon: "person.crop.circle")
+            }
+            Button(action: { self.show.toggle() }) {
+               CircleButton(icon: "bell")
+            }
+         }
+         Spacer()
+      }
+   }
+}