How to Create Amazing Effects and Animations with Justinmind

Animations

Justinmind can simulate many kinds of animations using the ‘Pause’ action. Let’s say you want to prototype a progress bar. That progress bar is just a rectangle that keeps growing for a while.

This could be a way to prototype that animation:

1) Drag two Rectangle widgets in the canvas. Put one inside the other, make it shorter and change its color to grey. Make the grey rectangle as long as you want the progress bar to be when the animation starts:

The two rectangle widgets

The two Rectangle widgets

 

2) Select the smallest rectangle and create an “On page load” event

3) Select the ‘Pause’ action and click ok

4) Select the gear icon next to the word ‘do’ and add a “Resize” action to make the rectangle grow

You can add actions by clicking on the gear icon

You can add actions by clicking on the gear icon

 

5) Repeat the last two steps until the rectangle reaches the desired length. Remember that each time you need to change the size of the rectangle in the event panel.

Specify the new size of the rectangle

Specify the new size of the rectangle

6) To speed up the process, you can copy and paste the “Pause” and “Resize” actions. Just remember to modify the “Resize” each time, specifying a larger width of the rectangle.

Your progress bar is now ready! You can click the Simulate button to see it working!

As you saw the ‘Pause’ action combined with other actions can be a powerful tool to prototype animations. But there are times when is easier to do it using ‘Effects’.

Effects

‘Hide/Show’ and ‘Set active panel’ actions can be improved using effects. These include fade in/out and slide effects.

In this tutorial, we’ll list all the effects available and we’ll give a description of each. We highly recommend you take a look at the example provided at the end of this tutorial to understand how the effects work.

An effect can be applied associated to either a “Hide/Show” or a “Set active panel” action. The effect will be triggered when an element is shown or hidden, or when a dynamic panel changes its state.

To add an effect, first you have to select an element that will trigger the action, and then you need to select the type of action you want (“Hide”, for instance). Then select the effect from the drop down menu and configure its execution using the different easing options.

Effects and Easing in the Event tab

You have a demonstration of each effect and easing type in the example prototype at the end of this tutorial.

Fade: A gradual change in the transparency level of the target. You can define the length of the effect expressed in milliseconds. If it is 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. Durations are given in milliseconds and specified in the length input; higher values indicate slower animations, not faster ones. 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, that will hide the widget towards the left. If you select a ‘Show’ instead, the widget will appear from the left.

Blind: Blinds the element away, or shows it by blinding it in.

Bounce: Bounces the element vertically or horizontally several times.

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

Drop: Drops the element away, or shows it by dropping it in.

Explode: Explodes the element into multiple pieces.

Fold: Folds the element like a piece of paper.

Highlight: Highlights the background with a defined color.

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

Pulsate: Pulsates the opacity of the element multiple times.

Shake: Shakes the element vertically or horizontally n-times.

Effects examples

This example prototype contains examples for all the types of effects and easing options available in Justinmind Pro and Enterprise. Our effects use all the power of jQuery.

6 Comments

  1. Ivan

    September 17, 2014 at 12:47 am

    The link to the example prototype is broken….

    • admin

      September 18, 2014 at 2:59 pm

      Fixed. Thanks for telling!

  2. Yoshimitsu Nakazawa

    November 17, 2014 at 5:37 am

    In the sample step explanation,
    4.Select the arrow icon next to the word ‘do’ is not correct. This supposed to be “gear” icon instead. I think.

    • admin

      December 9, 2014 at 1:41 am

      Thanks! It’s been fixed.

  3. CHANDRAKANT

    January 30, 2015 at 11:46 am

    Point no. 4 is ambiguous , where is gear icon and where is do ?

    • Lidia Rodriguez

      February 26, 2015 at 11:58 am

      In the event’s tab, at the bottom, you’ll find the pause icon and, on top of it, the gear icon and the word ‘Do’.

Leave a reply

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

− 2 = 2

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>