Creating a Transition
To create a Transition from a selected Frame, click on the Frame's connector, then click on the layer that you want to transition to. This will create an interaction with a Magic Motion type Transition with a Tap trigger.
You can also create a Transition from the Properties panel. Click on the + button next to Interactions, select an Interaction from the menu, then select the Transition type.
When you create a Transition, selecting the Transition's origin Frame will show an arrow connecting the origin to its target.
Tip: To see all of a project's transition arrows, select Menu > View > Show All Links.
Editing a Transition
On the Properties panel, you'll see the new Transition listed in the Frame's Interactions.
To open the Transition editor, click on the Transition.
To delete a Transition, click on the Transition's x button.
A Transition has four properties:
- Trigger is the interaction that will start the Transition
- Target is the layer that will be transitioned to, or "Back to Previous"
- Type controls how the prototype should move from the origin to the target
- Animation controls how the prototype should animate the transition
Any event can trigger a Transition. A Frame has seven triggers, each responding to different pointer actions, but you may also find Code Components with their own custom triggers.
Tip: Consider using the various Default Components and their built-in triggers. Some components, like the Input component, will have built-in triggers like typing inside the input field, or focussing the input field.
A target can be any top-level layer — a layer that is directly on the canvas. Alternatively, a Transition can target Back to Previous, in which case the prototype will transition back to the previously visited layer.
Tip: A transition with a Back to Previous target is especially useful for parts of your prototype that may be arrived at from different origins, such as the close button of a menu or modal.
You can choose from seven different Transition types that determine how the prototype should animate between the Transition's origin and target.
The Magic Motion type is special: instead of animating the origin and target layers, it will animate the children of those layers.
You can use the Animation Editor to set how a Transition should animate to its target. The Animation Editor gives you full control over the exact type of ease or spring animation you’d like to use.