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 default Tap trigger. You can also create a Transition from the Properties panel. Click on the Interactions + button, select an Interaction from the menu, then select the Transition type.
Shows the different transition options in the property panel
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:
- On specifies the type of interaction that will trigger the Transition
- Delay allows us to add a time period between the trigger and the animation
- Target is the layer that will be transitioned to, or "Back to Previous"
- Animate controls the type of animation you want to transition with
Any event can trigger a Transition. Depending on the element, or component, you are working with, you will notice varying triggers.
A Frame has four triggers, each responding to different pointer actions:
- Tap Start
- Mouse Enter
- Mouse Leave
A Screen has two additional triggers:
- Key & Gamepad
The Appear trigger is fired the moment your Screen is displayed in the Preview. This trigger is mostly useful in tandem with the Delay property (read more about this prop below).
Key & Gamepad
The Key & Gamepad triggers allow you to trigger a transition from either a key on your keyboard or a gamepad. Below you’ll find a list of known supported gamepads:
- DualSense 5 (with DS4Windows)
- DualShock 3 & 4
- Xbox Wireless Controller
- Steam Input (using GlobalSC)
- Nintendo Joycons
- PS3 DJ Hero Turntable (using custom driver)
- Thrustmaster T300 RS GT (with pedals disabled)
Is your hardware not supported yet? Let us know by creating a feature request and perhaps we can support it in the future.
You may also find Default Components from the Insert Menu with their own custom triggers.
There are too many to list, but below you’ll find a number of unique triggers you can tap into when using these components.
- Focus, Submit, Change, Blur on the Input Component
- Timeout on the Loader Component
- Toggle, Toggle On, Toggle Off on the Toggle Component
- Change, Min, Max on the Slider Component
- End, Pause, Play, Seeked on the Video Component
- Play, Pause, End, TimeUpdate on the Audio Component
- Focus, Blur, Select 1/10 on the Select Component
- On Change and Segment 1/5 on the Segmented Control Component
Visit this playlist for videos on using these triggers for many different components, such as for the Input component:
The delay property allows us to specify a time duration to wait until the transition should actually start.
Tip: We can use the delay property in combination with the Screen’s Appear trigger to create automated delay-based animations and transitions with both Screens but also in Components.
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 7 different Transition types that determine how the prototype should animate between the Transition’s origin and target:
- Magic (Motion)
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.