Transition Designer overview

Transitions are the most powerful and most fun part of Flinto. Creating your own animated transitions in the Transition Designer is easy. You should exercise restraint when creating transitions, it’s easy to get carried away with fancy effects.

The Transition Designer is a separate view from the canvas. It focuses on the two screens involved in the transition. After designing your transition, you can exit back to the canvas view and continue creating new screens and links.

The Transition Designer looks a lot like the canvas view with a layer list on the left, your screen content in the middle, and an inspector on the right. There is an additional toolbar across the top which includes the important transition preview control. There are also timing options at the bottom of the inspector.

It’s important to preview your transition frequently while you are designing it in order to make sure it looks right, and to access the end state.

To create a transition, you need to ensure that the incoming screen is not visible at the beginning of the transition, and the outgoing screen is not visible at the end of the transition. How you hide those screens is up to you. You can fade them out, move them outside the device area, scale them down, etc. Flinto will automatically animate the hidden screen into it’s final state based on how it appeared in the canvas.