Learn how to prototype web and mobile apps

How to add animations to your web and mobile prototypes

This tutorial will show you how to add animations to your web and mobile prototypes.


Justinmind can simulate many kinds of animations using the ‘Pause’, ‘Show’, and ‘Move’ actions combined with effects.

You can download the example below here.


interactive wireframe animation ghost


In the example you can see above, we have a simple image that moves back and forth, and fades in and out.

Here’s a way to prototype such an animation:

1) Drag an image widget to the canvas, and mark it as hidden in the Properties tab (by checking the ‘Hide component’ box).

2) Add an ‘On page load’ + ‘Pause’ event, which will pause the following event for the amount of time you like (in this example, 1000ms).

Interactive wireframe animations: events

3) Now add an ‘On Page Load’ + ‘Show’ event, selecting the image as the component to be displayed. Add a ‘fade’ effect with a 500ms duration to replicate the example. Click OK.

Web wireframe animation events

4) In the events tab, click on the gear icon next to the word ‘do’ and add another action: “Move”, setting the left ‘Offset’ position to 600px and leaving the Top position as it is (1). Add a ‘linear’ easing effect with a duration of 1500ms (2). Click OK.

Interactive wireframe animation effects

5) Create another ‘Show’ action by clicking on the gear icon, and add a ‘pulsate’ effect with no easing and a duration of 200ms.

The ‘ghost’ has reached the end of the track and we want it to go back, turning black.

6) Add a ‘Set value’ action by clicking on the gear icon. In the events dialog, select the image as the component that has to display the value. In the bottom part, select the ‘Fixed’ option and upload another image (in this example, we added the same image but reversed and in black). Click OK.

7) Add another “Move” action, this time setting the left ‘Offset’ position to -600px (so that the ghost moves backwards). Add a ‘linear’ easing effect with a duration of 2000ms. Click OK.

8) Finally, add another ‘Set value’ action, by clicking on the gear icon. In the events dialog, select the ghost image as the component that will display the value. Below, select the ‘Fixed’ option and upload the initial white image. Click OK. The events bar should look like the one in the image below.

app wireframe animation events

That’s it. You can have the ghost walk back and forth all the times you like. Just copy and paste the whole event the times you wish.

You can now click the ‘Simulate’ button to see it working!

As you saw, we can combine the ‘Pause’, ‘Move’ and ‘Show’ actions to prototype nice animations. We have also used some effects to improve the final output. Let’s have a closer look at what kind of effects you can add to your interactive wireframes.

Next tutorial > Add Transition Effects to your interactive wireframes


  1. Nick Chilvers

    September 11, 2015 at 11:55 am

    Is it possible to curve the edges of the rectangle at all?


    • Danielle Schneider

      September 11, 2015 at 1:01 pm

      Yes – select the rectangle and look in the properties panel and scroll down. You should see an option to round the edges of the rectangle.

      • Nick Chilvers

        September 14, 2015 at 11:59 am

        Perfect, I have it. Thanks Danielle.