Skip to content
New way to perform animated transitions
Branch: master
Clone or download
Latest commit a3592c5 Jan 9, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
CardsNavigation.xcodeproj Naming and generics refactoring Dec 24, 2018
Liquid Linter fixes Dec 24, 2018
LiquidTransitionTests Linter fixes Dec 24, 2018
Voronoi Linter fixes Dec 24, 2018
.gitignore - timing added Sep 11, 2018
LICENSE.txt - edit podspec Oct 25, 2018
LiquidTransition.podspec - rename podspec Oct 25, 2018 Update Nov 16, 2018

LiquidTransition   Tweet

Cocoapods iOS 8.0+ Version Swift 4.2 License Donate

LiquidTransition provide new API for transition creation.


  • Easy and convinient API (less boilerplate code)
  • Animate backward
  • Interrupt transition at any time to continue interactive
  • Helper class for restore views state
  • Animation of custom properties (or CALayer properties)
  • Complex transition without 'lag'

Web browser   Photo browser   Complex animation



Add the following entry to your Podfile:

pod 'LiquidTransition'

Then run pod install.

Don't forget to import LiquidTransition in every file you'd like to use LiquidTransition.


Like this you can create simple transition

import LiquidTransition

class FadeTransition: TransitionAnimator<FromViewController, ToViewController> {

    init() {
        super.init(from: FromViewController.self, to: ToViewController.self, direction: .both)
        duration = 0.3
        timing = Timing.default
        // do not perform here complex operations, cause it calls on app initialization
    override func animation(vc1: FromViewController, vc2: ToViewController, container: UIView, duration: Double) {
        vc2.view.alpha = 0
        // perform linear animation and manage timing function with `self.timing`
        UIView.animate(withDuration: duration, delay: 0, options: [.curveLinear], animations: {
            vc2.view.alpha = 1
        }) { _ in
            vc2.view.alpha = 1 // if anim somehow canceled

On app starts you can setup transitions

Liquid.shared.becomeDelegate() // Liquid automaticly becomes delegates for all animated transitions

That's it! Easy enought?! :)


import LiquidTransition

class ExampleTransition: TransitionAnimator<SampleController, CardsNavigationController> {

    var imgView: UIImageView!
    init() {
        super.init(from: SampleController.self, to: CardsNavigationController.self, direction: .both)
        duration = 0.4
        timing = Timing.init(closure: { $0 * $0 })
        addCustomAnimation {[weak self] (progress) in
            self?.imgView?.layer.cornerRadius = 20 * (1-progress)
    override func animation(vc1: SampleController, vc2: CardsNavigationController, container: UIView, duration: Double) {
        imgView = vc2.imgView
        // this class restore all views state before transition
        // when you have lot of property changes, it can be might helpfull
        let restore = RestoreTransition()
        restore.addRestore(imgView, vc1.fadeView)
        // cause on end transition we dont want restore superview of `vc1.view` and `vc2.view`
        restore.addRestore(vc2.view, ignoreFields: [.superview])
        vc2.view.alpha = 0
        UIView.animate(withDuration: duration, delay: 0, options: [.curveLinear], animations: {
            vc2.view.alpha = 1
            vc1.fadeView.alpha = 0
            self.imgView.frame = CGRect(/*new frame*/)
        }) { _ in

Sometimes we need that one transition work for multiple controllers. In this case you can define UIViewController as template classes and call init method with multiple classes defined:

class FadeTransition: TransitionAnimator<UIViewController, UIViewController> {

init() {
    super.init(from: [VC1.self, VC2.self, VC3.self], to: [VC4.self, VC5.self], direction: .both)
    duration = 0.3

override func animation(vc1: UIViewController, vc2: UIViewController, container: UIView, duration: Double) {
// animation

Or use protocol, to have access to common views. If it's not your case, you can ovverride canAnimate function

open func canAnimate(from: UIViewController, to: UIViewController, direction animDirection: Direction) -> Bool

and define your conditions


  • Backward animation
  • Custom timing function
  • Allow custom animation
  • Restore view state helper class
  • Smooth interactive animation for complex prepare animation
  • Support Cocoapods
  • Support Carthage
  • Add custom save keys for RestoreTransition
  • Add some default animations


LiquidTransition controls animation percent completion. So if you define animation in one direction, it can run animation backward. In backward animation run from 1 to 0. So if you works with NSNavigationController with navigationBar, you can see that navigationBar animates backward (see example with photos). In this case better to define animation in both directions.

LiquidTransition 'inspired' by Hero. We have complex UI with custom animation. Several weaks we try to implement performance animation in Hero. When nothing works with Hero, we check manual implementation of transition. It works much faster. Cause Hero do a lot of snapshots, performs transition becomes laggy. In real project Hero showed not enough performance and require a lot of code to say what you really want. So in real app manual transition looks more suitable. Hero was removed from project and we move to transitions with manual control. Some pieces of new library start appear in our project. Now some ideas and code was moved and refactored for common usage in one library.

If you look for something similar, take a look on Transition. I found this project after finish LiquidTransition and it have good ideas behind. It less convenient, but still good lib.


Alexandr Graschenkov:
iOS and Computer Vision developer

You can’t perform that action at this time.