The timer trigger

Tutorial Breakdown

Interactions in a prototype typically require the end user to tap or click a button or element to trigger a transition to another screen—but sometimes you might want a transition to begin automatically, without user action. With InVision Studio’s timer trigger, creating automatic screen transitions—like splash screens, pop-up modals, and multi-step animations—is fast and easy.

In this tutorial, we’ll look at:

  • What the timer trigger can do
  • How to apply the timer trigger
  • Creating a looping animation

Studio project file

Download this free Studio project file to follow along—step by step—with the tutorial.

New to Studio?

Download the latest version of InVision Studio to get started

Download StudioDownload InVision Studio

Transcript

Sometimes rather than waiting for the user to interact with your prototype, you want a transition between two art boards to happen automatically, either instantly or after a certain amount of time has passed. We're able to accomplish that in Studio very easily using something called the Timer Trigger. In order to use the Timer Trigger from one art board to another, you've got to create the interaction from the art board itself, rather than an object that's on the art board. So with the name of one art board selected, we can press C on the keyboard to create an interaction. And then we can move over and choose where we want to link it to. And then we get our dialogue where we can choose our trigger. So by default, it's going to wait for the user to tap on the art board in order to go to the next art board. We can simply click to change that. And our fourth of the four icons here across the top is the Timer Trigger. And with the Timer Trigger, you just set a timeout, which is going to be a delay between when the first art board appears and when the transition begins to take place to the second art board. And then you choose the method with which that transition takes place. I'm going to use the Motion Transition here to animate the difference between these two screens, which we'll talk more in detail in another video. But when I hit Save, now, if we go and preview this, it'll automatically transition after just 0.3 seconds. So now, I want it to transition to the third art board as well. So I'm going to take the same steps again, and I'm going to click on art board two. Press the letter C. Click on art board three. And Studio remembers what I'm trying to do here. And we'll, again, do the same Timer Trigger with a delay of 0.3 seconds with the motion transition at a duration of 0.3 seconds. And I'll save that as well. So now, we've got two steps done. And when we click, we should see step one, step two. There we go. And now, we just need it to loop around to the beginning if we want it to happen continuously over and over again. So lastly, we've just got to link art board three back to art board one. Press the letter C. Click over on art board one. And now, here, we are going to use the Timer Trigger, but I'm not going to use the motion transition just because it's overkill since these are the same screen. We just want it to happen instantly and without a delay. So it's instantly just going to go from art board three back to art board one, which visually won't look like anything happened, but it'll complete the loop. So we'll hit Save. We'll press Play. And there we have it. We've got our infinite loop. So just like that, we're able to create high fidelity animations that don't require any specific user interaction to trigger.

Read More
Free. Forever.

Push your craft to new heights.

InVision Studio—designed with you in mind.

Make your next screen your best one yet.

Download studio free Download studio