Easy interactive interruptible custom ViewController transitions


CocoaPods version license [platform]()


Transition is a library that helps you build iOS view controller transitions. Implementing a nice interactive custom view controller transition involves quite a number of components. You have to implement the correct delegates, handle the switching between passive animation and active interaction phases, ensure the timing is right, think of interruption and cancellation, keep responsibilities separated... It quickly gets messy! This is where Transition helps you out: you just define the animation and the interaction, Transition ties it all together.

In short:

  • You specify single-responsibility components (animation, interaction, ...)
  • Transition ties them together


There are several examples (which can be found in Examples/):

  1. SimpleExample: implements the basic steps explained in this README.
  2. TabBarTransitionsExample: shows you how to implement custom UITabBarController transition animations with custom interaction.
  3. ModalTransitionsExample: shows you how to implement custom modal transition animations that include interaction with a shared element.
  4. BuiltInTransitionsCatalog: shows a small collection of built-in transition animations.

To run an example project, clone the repo, navigate to one of these example directories, and run pod install from that directory first.


  • iOS 10.0+
  • Swift 3.0+


1. The AnimationLayer

The AnimationLayer is the most essential part of setting up a transition; without it, there'll be no animation. An AnimationLayer is a simple struct that takes two arguments:

1. Animation function

This is a simple closure with the signature () -> Void. In this closure you define your animation, just as you would with a UIView or UIViewPropertyAnimator animation. For each AnimationLayer, Transition will instantiate a UIViewPropertyAnimator, passing it your animation block.

2. TimingParameters

This defines the timing of your animation. It must be a UITimingCurveProvider, such as an instance of UICubicTimingParameters or UISpringTimingParameters.

(3. AnimationRange)

Additionally, you can set an AnimationRange, which by default is set to AnimationRange.full. This range defines the start and end point (as fractions of the total transition animation duration) between which your AnimationLayer's animation will run.

You create your AnimationLayer as follows:

let animationLayer = AnimationLayer(timingParameters: UICubicTimingParameters(animationCurve: .easeOut)
                                           animation: { topView?.transform = targetTransform })


Related Repositories



viewpager with parallax pages, together with vertical sliding (or click) and act ...



Allows the easy creation of animated transition effects when the state of Androi ...



A simple and elegant single page transition library. ...



jQuery plugin to set listeners to CSS Transition animation end or specific part ...



State transition plugin for Phaser.js ...