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. Add an “On Page Load” + “Pause” event, which will pause the following event for the amount of time defined (in this example, 1000 ms).
    • Interactive wireframe animations: events
  3. Now add an “On Page Load” + “Show” event, selecting the Image as the element to be displayed.
    • Add a “fade” effect with a 500 ms duration to replicate the example.
    • Click “OK”.
    • Web wireframe animation events
  4. In the Events palette, click on the gear icon next to the word “do” and add another action: “Move”.
  5. Interactive wireframe animation effects 
    1. Set the left to “Offset” position at 600 px and leave the Top position as it is.
    2. Add a “linear” easing effect at a duration of 1500 ms. Click “OK”.
  6. Create another “Show” action by clicking on the gear icon, and add a “pulsate” effect with no easing and a duration of 200 ms.
    • The ‘ghost’ has reached the end of the track and we want it to go back, turning black.
  7. Add a “Set Value” action by clicking on the gear icon.
    • In the Events dialog, select the Image as the element that has to display the value.
    • Below, select the “Fixed” option and upload another image (in this example, we added the same image but reversed and in black).
    • Click “OK”.
  8. Add another “Move” action, this time setting the left “Offset” position to -600px (so that the ghost moves backwards).
    • Add a “linear” easing effect with a duration of 2000 ms.
    • Click “OK”.
  9. Finally, add another “Set Value” action, by clicking on the gear icon.
    • In the Events dialog, select the ghost image as the elementthat will display the value. 
    • Below, select the “Fixed” option and upload the initial white image.
    • Click “OK”.
    • The Events palette should look like the one in the image below.
    • app wireframe animation events

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

You can download our example here.