How to Create Amazing Effects and Animations with Justinmind
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:
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
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.
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’.
‘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.
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.
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.