Connected layers is a feature in Flinto for Mac that makes creating certain transitions easy. For example, a photo zoom effect where a small photo on one screen zooms up to a full-sized photo on a second screen. Connected layers come in handy whenever you have two layers in different screens that you want to treat as a single layer during a transition. Connect them together in the transition designer and Flinto for Mac animates them automatically.
When you connect a layer from the start screen of your transition to a layer in the end screen, Flinto will take the two layers and stick them together and adjusts the end screen layer to match the apperance of the start screen’s layer. When the animation happens, the two layers move together from the appearance of the start screen’s layer, to the appearance of the end screen’s layer.
Connecting layers is easy, but you may find situations which require more control. In the inspector there are several options for the exact behavior of connected layers, below is an explanation of what they all do. You may not need these often, but depending on the situation, your connected layers might not look quite right until you choose the option that fits your transition the best.
Crossfade
The start screen’s layer fades out as the end screen’s layer fades in. This comes in handy when both layers have some transparency, but can create a little “dip” in overall opacity in the middle.
Hide layer in start screen
The start screen’s layer is hidden and replaced by the end screen’s layer, which animates by itself.
Hide layer in end screen
This is the same as “hide layer in start screen” except the end screen’s layer is hidden and the start screen’s layer is shown throughout the animation.
Fade layer in start screen
The start screen’s layer is placed on top of the end screen’s layer, and it fades out as the animation progresses.
Fade layer in end screen
This is the opposite of “Fade layer in start screen” the end screen’s layer is placed on top and it fades out as the animation progresses.
Bonus: Z-Index
When a connected layer transition happens, the two layers are brought next to each other behind the scenes in Flinto. You can decide whether they’re matched to the position of the lower or higher layer using the z-index option for connected layers.
