Justinmind

SUPPORT

Learn how to prototype web and mobile apps

Add effects and animations to your interactive wireframes

This tutorial will show you how to add effects and animations to your interactive wireframes.

Animations

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

You can see and interact with the example below here and download it 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.

Effects

Effects can be associated to a ‘Hide’, ‘Show’ or ‘Set active panel’ action. This means that they can be triggered when an element is shown or hidden, or when a dynamic panel changes its state. In the example above, we had ‘fade in’ and ‘pulsate’ effects applied to the ‘Show’ action.

The example below contains all the types of effects and easing options available in Justinmind Pro and Enterprise.

You can see the example below and download it here

 

 Interactive wireframes effects

 

As we saw, in order to add an effect, firstly we have to add an event, then select the effect in the bottom part of the events dialog, and configure its execution using the different easing options.

Below you can find a list of all the effects available, and a description of each.  You have a demonstration of each effect and movement style in the example prototype. We highly recommend you take a look at the example provided above to understand how the various effects work.

Fade: A gradual change in the transparency level of the target. You can define the length of the effect expressed in milliseconds. If it’s a hide action, it will be a fade out (to be totally transparent at the end) and if it is a show action, it will be a fade in (to be totally opaque at the end).

Slide: The slide effect animates the height and width of the matched widgets. The duration is given in milliseconds and specified in the length input; higher values indicate slower animations. You can add this type of effect to a Hide or Show action. You can define the direction for the slide effect using the ‘side’ select list. This ‘side’ refers to where the widget will slide in or out. So if you define a ‘Hide’ + ‘Slide left’ action, this will hide the widget towards the left. If you select a ‘Show’ instead, the widget will appear from the left.

Blind: The element will move in a ‘blind’ motion.

Bounce: Bounces the element vertically or horizontally across the screen several times.

Clip: Clips the element on or off, vertically or horizontally.

Drop: Drops the element.

Explode: Makes the element explode into several pieces.

Fold: Makes the element fold like a piece of paper.

Highlight: Highlights the background with a defined color.

Puff: Scale and fade out animations create the puff effect.

Pulsate: Makes the element pulse.

Shake: Shakes the element vertically or horizontally.

3 Comments

  1. Nick Chilvers Says :

    September 11, 2015 at 11:55 am

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

    Nick

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

Leave a reply

Your email address will not be published. Required fields are marked *