How to Create Amazing Effects and Animations with Justinmind
Justinmind Prototyper can simulate many kind 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:
- Drag a rectangle and make it as long as the progress bar is when the animation starts
- Select the rectangle and create an on page load event
- Select the ‘Pause’ action and click ok
- Select the gear icon next to the word ‘do’ and add a resize action to make the rectangle grow
- Repeat the last two steps until the rectangle reach the desired lenght
- Your progress bar is ready!
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 to take a look at the example provided at the end of this tutorial to understand how the effects work.
An effect can be applied either associated to a hide/show or a set active panel action. That way the effect will be trigger while an element is show/hidden or when a dynamic panel changes it’s state. So first you have to select an element that will trigger the action and then select the type of action you want (hide, for instance). Then select the effect from the drop down menu. The execution of an effect can be configured using different easing options. You have an example of each easing type in the example 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 lengh 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 Prototyper Pro. Our effects use all the power of jQuery.