How To Make A UIViewController Transition Animation Like in the Ping App

The Finishing Touches

For the sake of completeness, you’ll add one more small animation to the transition. Instead of the circle just growing to reveal the destination view controller, you’ll also have the destination view’s text fade-in from the right.

Compared to the last animation, this one’s a breeze. Go to the bottom of the CircularTransition class definition and add the following method:

func animateToTextView(toTextView: UIView, fromTriggerButton: UIButton) {
  
}

Add the following lines to this new method:

let originalCenter = toTextView.center
toTextView.alpha = 0.0
toTextView.center = fromTriggerButton.center
toTextView.transform = CGAffineTransform(scaleX: 0.1, y: 0.1)

Here, you’re setting the starting state of toTextView. You set its alpha to 0, center it with the trigger button, and scale it to 1/10th its normal size.

Next, add the following UIView animation.

UIView.animate(withDuration: 0.25, delay: 0.1, options: [.curveEaseOut], animations: {
  toTextView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
  toTextView.center = originalCenter
  toTextView.alpha = 1.0
}, completion: nil)

Here you’re just undoing everything you just did to animate your text view back to the center, to its full size with a quick fade in.

Finally, add the following call to the bottom of animateTransition(transitionContext:).

animateToTextView(toTextView: toVC.contentTextView, fromTriggerButton: fromVC.triggerButton)

You’re providing animateToTextView with the toVC text view and the fromVC button. Now, it’ll complete the text view animation alongside your other transition animations.

Build and run one final time to have a transition that closely mimics that of the original Ping app!

Where to Go From Here?

To download the completed Pong app, click here.

To see the official Apple documentation for UIViewController transition animation, check out Customizing the Transition Animations in the View Controller Programming Guide for iOS.

Hopefully you enjoyed this tutorial and feel a little more confident about trying to replicate other animations you’ve seen in the wild.

If you’re interested in learning more, feel free to check out our beginning and intermediate animation video courses as well as our full book, iOS Animations by Tutorials.

If you have questions, comments or would like to show off your own cool animations, please join the discussion below!