Hero is a library for building iOS view controller transitions. It provides a layer on top of the UIKit's cumbersome transition APIs. Making custom transitions an easy task for developers.

Features

      

With Hero, you can easily mix & match these effects to build your own custom transition.

At its core, Hero is similar to Keynote's Magic Move. It checks the heroID property on all source and destinations views. Every matched view pairs are then automatically transitioned from its old state to its new state.

Hero can also construct animations for unmatched views. It is easy to define these animations via the heroModifiers property. Hero will run these animations alongside the Magic Move animations. All of these animations can be interactively controlled by user gestures.

By default, Hero provides dynamic duration & easing based on the Material Design Motion Guide. The duration is determined by the distance & size change. The easing curve is selected base on whether or not the view is entering or exiting the screen. It save you the hassle while providing consistent and delightful animations.

Hero does not make any assumption about how the view is built or structured. It will not modify any of your views' states other than hiding them during the animation. This makes it work with Auto Layout, programmatic layout, UICollectionView (without modifying its layout object), UITableView, UINavigationController, UITabBarController, etc...

What's more

Starting with 0.3.0. Hero provides several default transitions. These can also be customized & combined with your custom heroID & heroModifiers. Makes transitions even easier to implement.

      

Example Gallery

Checkout the Example Gallery Blog Post for a general idea of what you can achieve with Hero

Usage Example 1

View Controller 1

redView.heroID = "ironMan"
blackView.heroID = "batMan"

View Controller 2

isHeroEnabled = true
redView.heroID = "ironMan"
blackView.heroID = "batMan"
whiteView.heroModifiers = [.translate(y:100)]

Usage Example 2

View Controller 1

greyView.heroID = "skyWalker"

View Controller 2

isHeroEnabled = true
greyView.heroID = "skyWalker"

// collectionView is the parent view of all red cells
collectionView.heroModifiers = [.cascade]
for cell in redCells {
	cell.heroModifiers = [.fade, .scale(0.5)]
}

You can do these in the storyboard too!

Documentations

Checkout the wiki pages for documentations.

For more up-to-date ones, please see the header-doc. (use alt+click in Xcode)

iPhone 7 (Plus) Simulators

Hero does not work on iPhone 7 (Plus) Simulators due to an Apple bug. Please use other simulators or a real device when working with Hero.

Interactive Transition Tutorials

Interactive transitions with Hero (Part 1)

Contribute

We welcome any contributions. Please read the Contribution Guide.

License

Hero is available under the MIT license. See the LICENSE file for more info.