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