Create timed transitions

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.

Animated number counters using time transition
Animated number counters using timed transitions

To create a simple timed transition, perform the following steps:

  1. In Prototype mode, click the title of the source artboard and wire it to the destination artboard. 

  2. 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.

  3. To preview the timed transition, select  

Examples and sample files

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.

Získajte pomoc rýchlejšie a ľahšie

Nový užívateľ?