Learn how to prototype web and mobile apps

How to add effects to your UI prototypes

With Justinmind, you can add effects to your UI prototypes in order to add animation and transitions to your designs.

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

Next tutorial > Simulate Mobile Gestures in your app wireframes