Transitions

You can use Transitions to move your prototype from one Frame to another. Any interaction can trigger a Transition.

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.

Properties

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

Trigger

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.

Target

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.

Type

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.

Animation

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.