How to Make a Clickable Prototype with Looping Animation in Studio

Lately, I am trying to make an app intro prototype for our product pairing app, which could lead new user set up the app with our physical light product, and help them know what our product features are and how to use them. I started our prototype in Sketch, but would like it have more animation to better lead user to go through the whole flow, just like that stretching circle around the icon in the screen, in a looping animated way to get user’s attention to tap on it. Rather than showing user a video of using the app, which could be done in After Effects, I think having user to try out a clickable prototype would let them know more about our product and we could get more valuable feedback from them. And that is why I moved our prototype to Studio, and trying to make a clickable prototype with looping animation.

Studio is a prototype making software just like Sketch. You could import Sketch files in it and keep on editing. Also, you could upload prototypes to InVision to share it with others. I am still a newbie in Studio, so I spent a lot of time trying to figure how to make the effects that I wanted. Here, I am going to share the experience about making the looping animation part.

First, you would need to create two exactly same artboards with all the elements that could show in the animation. It doesn’t matter that some elements might disappear in some frames that you might think of, just include all of them in both of your artboards. And the name of the elements that you want them to be animated must be the same in the layer section.

Then just go to the first artboard to set up how you want your animation start view looks like. In my example, I want there is no circle around the picture in the beginning. So, I go to the first artboard to set the circle element’s opacity to 0%. The reason why not just delete it or turn off the visibility is that element should still exist and have a slowing changing ability to be transfer to the situation of the next artboard.

Last is to set the animation in the “INTERACTIONS” section. The most important thing is to choose the trigger. Because we would want to make it loop without any click or drag active movements from the user, we need to set the trigger as “mouse over” on the whole screen area. In order to do that, we could set the trigger element as the screen background, navigate to the next artboard. Then set the “transition” to “motion”, set how much time you want to stay on the first screen before it starts the motion in the “delay” section, set how long you would want the motion to take in the “duration” section. After this, go to the second artboard, choose the background layer, set up the exactly same interaction that we did in the first artboard but navigating to the first artboard this time. Then hit the preview button, you would see a looping animation in the app screen. And you could also set up all other click interactions like what you can do in Sketch or XD.