Recreate Safaris Tab animation open opening / closing a WKWebView - swift

Question

so I am trying to recreate that animation in Safari where you have a window open and then click the button to "view all tabs". And then when you tap on an individual window it animated open.
Here is a video of an example: https://imgur.com/QNI26YK
I'm using SwiftUI currently but think I might need to do it in UIKit? Anyways, i'll show you what I have so far.
The issue I have is the scaling of the window. In safari it scales so seamlessly, where when I do it you can see it readjust. It's like they just minimize the window in some way.
Anyways, here is what I have. Any ideas would be great! Thanks
struct WebViewAnimationTest: View {
#State var show = false
#Namespace var namespace
var body: some View {
ZStack {
SimpleWebView(url: "https://google.com", fullscreen: show)
.frame(width: show ? .infinity : 200, height: show ? .infinity : 300)
.overlay(Color.primary.opacity(0.01))
.ignoresSafeArea()
.onTapGesture {
withAnimation(.spring()) {
show.toggle()
}
}
.matchedGeometryEffect(id: "id", in: namespace)
}
}
}
WEBVIEW:
import Combine
import SwiftUI
import WebKit
struct SimpleWebView: UIViewRepresentable {
typealias UIViewType = WKWebView
var url: String
var fullscreen: Bool = false
func makeUIView(context: Context) -> WKWebView {
let webView = WKWebView()
let url = URL(string: url)
webView.load(URLRequest(url: url!))
return webView
}
func updateUIView(_ uiView: UIViewType, context: Context) {
if fullscreen {
uiView.transform = CGAffineTransform(scaleX: 1, y: 1)
} else {
let actualWidth = (getRect().width - 60)
let cardWidth = actualWidth / 2
let scale = cardWidth / actualWidth
uiView.transform = CGAffineTransform(scaleX: scale, y: scale)
}
}
}

Answer 1

Here is what I have so far. You might want to switch to LazyVGrid with ScrollView. The idea is to animate changes in scale effect.
import SwiftUI
struct ContentView: View {
var body: some View {
WebViewAnimationTest()
}
}
struct WebViewAnimationTest: View {
#State var show = false
#Namespace var namespace
let data = SimpleWebView(url: "https://google.com")
var body: some View {
ScrollView {
ZStack {
HStack {
ForEach([data], id: \.id) { view in
view
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
.ignoresSafeArea()
.scaleEffect(show ? 1.0 : 0.5)
.onTapGesture {
withAnimation {
show.toggle()
}
}
}
}
}
}
}
}
import WebKit
struct SimpleWebView: UIViewRepresentable {
typealias UIViewType = WKWebView
var url: String
var fullscreen: Bool = false
let id = UUID()
func makeUIView(context: Context) -> WKWebView {
let webView = WKWebView()
let url = URL(string: url)
webView.load(URLRequest(url: url!))
return webView
}
func updateUIView(_ uiView: UIViewType, context: Context) {
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

Answer 2

You can use 'UIView.transition' like below
let webView = WKWebView()
self.view.addSubview(webView)
UIView.transition(with: self.view, duration: 0.5, options: .transitionFlipFromRight, animations: {
webView.isHidden = false
}, completion: nil)
UIView.transition(with: self.view, duration: 0.5, options: .transitionCrossDissolve, animations: {
webView.isHidden = true
}, completion: nil)