Adding advanced animations to your prototypes

With Justinmind, you can add advanced animations to your web and mobile prototypes. Create and simulate animations such as pause, show and move animations and combine them with transition effects for even more impressive interaction.interactive wireframe animation ghost
In the example above, an image moves back and forth across the screen, and fades in and out. To reproduce this example:

  1. Drag an Image widget to the Canvas, and mark it as hidden in the Properties palette (by checking “Hide component”).
  2. Create a variable, named it “Ghost” and leave its default value blank.Add new variable with empty value
  3. Add an “On Page Load” + “Pause” event, pausing for 1000ms.Interactive wireframe animations: events
  4. Back in the Events palette, right-click on the action you just created and select ‘add action after selected’. Create an “On Page Load” + “Set Value” event, setting the value to the ‘Ghost’ variable. For the value, type in ‘White’.Set ghost variable to 'white'
  5. Look back to the Events palette and create an “On Variable Change” + “Show” event, choosing the ‘Ghost’ variable as the variable to check. Select the image as the target to be shown with a fade effect of 500ms.Show ghost on variable change
  6. In the Events palette, right-click on the action you just created and select ‘add action after selected’. Leave the “On Variable Change” trigger, but change the resulting action to “Move”. Change the X position to offset with 600px, and the Y position to Current. Specify a linear easing effect of 1500ms.Move ghost
  7. Add another action – another “On Variable Change” + “Show” event, selecting the image to show with a pulsate effect of 200ms.
  8. Add another action – an “On Variable Change” + “Set Value” event, setting the value to the ‘Ghost’ variable. For the value, type in ‘Black’.
  9. Add one more action – “On Variable Change” + “Set Value”, selecting the image as the target. For the value, select the black/desaturated version of the image.Show black ghost image
  10. In the Events palette, click the ‘add condition’ text next to the events you created and you’ll see the Conditional Expression builder appear. In the builder, drag the variable to the open space in the expression, followed by the Equals (‘=’) function. Type in ‘White’ in the open space that appears.Add condition to actions
  11. Click the ‘Else’ text in the Events palette and create an “On Variable Change” + “Move” event, selecting the image to be moved. Change the X position to offset with -600px and the Y position to Current. Specify a linear easing effect of 1500ms.
  12. Add another action – “On Variable Change” + “Set Value”, selecting the image as the target of the action. For the value, select the white version of the image.Change the ghost to white
  13. Add one more action – “On Variable Change” + “Set Value”, selecting the ‘Ghost’ variable as the target of the action. For the value, type in ‘White’.
  14. Click on the ‘add condition’ text. In the Conditional Expression builder, drag the ‘Ghost’ variable to the open space in the expression, followed by the Equals (‘=’) function. Type in ‘Black’ in the open space that appears. This is how all of your events should look:All events for advanced animation

That’s it! Click “Simulate” to see your prototype in action.

You can download our example here.