In Prototype mode, click the title of the source artboard and wire it to the destination artboard.
Last updated on
May 16, 2021
Learn how to use time triggers to create timed transitions.
With time triggers, you can create transitions between artboards based on time delay and duration.
You can use Time triggers in combination with Actions to create a range of effects such as looping animations, progress bars, and more. Here is an example of Time trigger used with Auto-Animate to create a looping effect.
To create a simple timed transition, perform the following steps:
-
-
Click the connector to view the Interaction panel that appears in Property Inspector and set the following options:
- Trigger: Select Time. If you do not see the Time option, you may not have selected the whole artboard and its title in step 1.
- Delay: Enter the time delay to start the transition. The acceptable range is 0.2-5 seconds.
- Action: Select Transition. You can also use Time trigger with other Actions such as Auto-Animate, Overlay, and Speech Playback to create various effects. Refer Examples to learn how to create looping animation effect.
- Destination: Displays the destination artboard wired in step 1; you can modify if required.
- Easing: Select the easing effect you want to apply on the source artboard.
- Duration: Enter the duration of the easing effect to indicate the time span of the easing effect. The acceptable range is 0.2-5 seconds.
XD saves your attributes in the artboard and offers them as the default on further screens.
-
To preview the timed transition, select
.
Examples and sample files
Number counter animations are used to display numbers in a interesting and eye-catching way. Want to learn how to use timed transitions to create a running scoreboard?
1. In the Prototype mode, select the artboard title and set the following options:
- Trigger: Select Time.
- Delay: Enter the time delay as 0.8 seconds.
- Action: Select Auto-Animate.
- Easing: Select Ease In-Out.
- Duration: Enter the time duration as 4 seconds.
2. Click to preview the animated number counter.
Do download the sample files and watch this video to try them out.
Viewing time: 2 minutes 47 seconds.
Do you want to use timed transition to create an onboarding experience for your application? Check out this video and use this free UI kit to create an onboarding workflow.
Viewing time: 5 minutes 2 seconds.
Onboarding experience for an application
You can also check out XD support community for examples and tutorials.
Tips and tricks
Did you know that you can combine Time transitions with Auto-Animate and Overlay to create interactive effects? Check out this video to learn more.
Viewing time: 8 minutes 33 seconds.