Custom Modal Presentation Transitions – Fade Animation

Tram Ho

Development environment:

  • Swift Language Version: Swift 5.0
  • Xcode: Version 10.2.1
  • Deployment Target: 12.0

UIKit allows customizing view controller’s presentation through UIViewControllerAnimatedTransitioning delegate with two main functions:

  • transitionDuration (using:): The function takes information about the time the transition animations takes place. The return value must be the same as the value you used to configure animations in the animateTransition function (using:) .
  • animateTransition (using:): Function that allows config transition animations and is called when presenting or dismissing view controller.

Step 1: Initialize the screen

Step 2: Fade Animation Transition

We create class FadeAnimationController and apply the implementation of UIViewControllerAnimatedTransitioning .


  • fromView: is the view that appears at the beginning of the transition, or at the end of the cancel transition. For example, when presenting, fromView is the view of viewController1, while when dismissing, fromView is the view of viewController2.
  • toView: is the view that appears at the end of the completed transition.
  • container: acts as a superview containing the views involved in the transition.
  • presenting: Bool variable represents transition type (true when presenting and false when dismissing).
  • completeTransition (): The function informs the system that the transition animation has completed.

Step 3: Custom Navigation Controller

We create the TransitionDelegate class and apply the UIViewControllerTransitioningDelegate implementation.


  • animationController (forPresented presented:) : function returns object that executes animation transition when present.
  • animationController (forDismissed dismissed:) : function returns object that executes animation transition when dismissed.

Step 4: ViewController and ViewController2

We instantiate transitionDelegate object and assign delegate to 2 viewController.



Link github:

Share the news now

Source : Viblo