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.
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 can be interactive, too.
By default, Hero provides dynamic duration & easing based on the Material Design Motion Guide. The duration is determined by the distance and 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 means that it works with Auto Layout, programmatic layout, UICollectionView (without modifying its layout object), UITableView, UINavigationController, UITabBarController, etc...
The following videos give you a general idea of what you can do with Hero
- Video overview of the example project.
- Video overview of the built-in debugger that display timeline, arc curve, and 3d informations.
- Video overview of the usage with Injection App to provide dynamic modifications in realtime. Changing
HeroIDorHeroModifierswithout recompiling!
redView.heroID = "foo"
greyView.heroID = "bar"isHeroEnabled = true
redView.heroID = "foo"
greyView.heroID = "bar"
greenView.heroModifiers = [.translate(x:0, y:100), .scale(0.5)]
greyView.heroID = "foo"isHeroEnabled = true
greyView.heroID = "foo"
// 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!
NOTE: Hero won't work on iPhone 7 Simulators due to a bug by Apple. Try using other simulators or a real device when working with Hero.
We welcome any contributions. Please read the Contribution Guide.
Hero is available under the MIT license. See the LICENSE file for more info.