ios – Find out how to Precisely Replicate Instagram’s Customized Transition in UIKit

Spread the love

I got here throughout this article by Instagram and tried to recreate their fluid navigation transition utilizing UIViewControllerAnimatedTransitioning. I’ve learn varied examples and have grasp of how customized transitions typically function.

The Problem

To make clear, let’s check with the next screenshots from Instagram:

Keyframe 1 Keyframe 2 Keyframe 3
Messi1 Messi2 Messi3

The objective is to have the sq. picture from fromVC overlay onto the imageView in toVC, aligning the 2 photos precisely. Observe that it ought to work whatever the side ratio of toVC.imageView. On the identical time, windowView ought to increase, revealing toVC till it reaches its closing body, leading to a pleasant fluid transition.

My Try

My preliminary try did not obtain the specified impact—toVC neither scales nor expands from the middle (which is apparent as a result of I did not implement any dealing with for such circumstances). It simply slides in from the appropriate. This difficulty appears associated to the auto format of the snapshot view, which I have never resolved.

My Attempt

My Code

non-public func performPresentTransition(utilizing context: UIViewControllerContextTransitioning) {
    let containerView = context.containerView
    guard let fromVC = context.viewController(forKey: .from) as? ViewController,
          let originFrame,
          let toVC = context.viewController(forKey: .to) as? UINavigationController,
          let detailVC = toVC.topViewController as? PhotoDetailViewController
    else {
    guard let snapshot = toVC.view.snapshotView(afterScreenUpdates: true)
    else {

    let finalFrame = context.finalFrame(for: toVC)

    let windowView = UIView()
    windowView.backgroundColor = .crimson
    windowView.layer.cornerRadius = 0
    windowView.clipsToBounds = true
    windowView.body = originFrame

    snapshot.snp.makeConstraints { make in

    toVC.view.isHidden = true

    snapshot.alpha = 0

    UIView.animate(withDuration: transitionDuration(utilizing: context)) {
        snapshot.alpha = 1
        windowView.body = finalFrame
        windowView.layer.cornerRadius = 30
    } completion: { _ in
        toVC.view.isHidden = false


I would wish to know the way to set the constraints to exactly mimic the habits in the actual app.

Additionally, any recommendations for replicating this Instagram animation are welcome. I would favor to not use third-party libraries.

Leave a Reply

Your email address will not be published. Required fields are marked *