Designing zoom and pan effects

With Justinmind, you can to simulate zoom and pan functionalities using drag and drop in your Justinmind prototypes.
dynamic panel zoom pan

How to design zoom and pan effects

Follow the steps below to learn how to simulate zoom and pan in your prototypes:

  1. In a new mobile prototype, drag a Dynamic Panel to the canvas.
    • Resize it so that it covers the entire canvas, and double click on it to edit its contents.
    • image size zoom pan
  2. Drag an Image to the canvas. Double click the Image and in the dialog that appears, choose an image from your folders. (The size of the image needs to be larger than the dynamic panel. In our example the width is 2000 pixels and the height is 1500 pixels.)
  3. Go the Properties palette.
    • Resize the Image so that it’s larger than the dynamic panel – 2000 pixels by 1500 pixels.
    • zoom pan properties panel
  4. Go to the Outline palette, select the Image and place it inside the Dynamic Panel.
    • outline palette select image
  5. To simulate the pan functionality, select the Image on the canvas from within the Dynamic Panel and go to the events palette.
    • Click “Add Event” and add an “On Drag” + “Move” event, selecting the Image as the element to be moved from the Outline palette.
    • Below, change the X and Y positions to “With cursor”. Click “OK”.
  6. Back in the Events palette, click on the gear icon next to the word “Do” and select the “Add action” option.
    • Add an “On Drag” + “Insert Into” event, selecting the Image as the element to be inserted into another.
    • Below, select Panel 1 of the Dynamic Panel (from the Outline palette) as the container to insert the Image into. Click “OK”.
  7. To simulate the zoom functionality, drag a Button to the canvas and place it at the bottom of the screen outside of the Dynamic Panel. You may need to reorder your elements within the Outline palette.
    • Go to the Properties palette and rename its “Value” as “Zoom +”.
    • rename value zoom
  8. Select the Button and go to the Events palette.
    • Add an “On Toggle” + “Resize” event, selecting the Image from within the Dynamic Panel as the element to be resized.
    • Below, select “Calculated” from the “Width” drop-down and click the “Add Expression” link. When the Expression builder appears, drag the Image from within the Dynamic Panel in the Outline palette to the term in the Conditional expression. Select “Width” from the drop-down below the term.
    • Then, drag the “Multiply” Function to the next term. Finally, enter “2” in the last term. Click “OK”. Then, select “Calculated” from the “Height” drop-down and click the “Add Expression” link. When the Expression builder appears, drag the Image from within the Dynamic Panel in the Outline palette to the term in the Conditional expression. Select “Height” from the drop-down below the term. Then, drag the “Multiply” Function to the next term. Finally, enter “2” in the last term. Click “OK”.
    • These expressions will ensure that the image zooms in horizontally and vertically x2 upon simulation.
    • Below, change the “Easing” option to “linear” and click “OK”.
  9. Back in the Events palette, click on the gear icon next to the word “Do” and select the “Add action” option.
    • Add an “On Toggle” + “Set Value” event, selecting the Button.
    • Below, enter “Zoom –” in the input text field and click “OK”.
  10. Back in the canvas, click “Simulate” to interact with your prototype. You should be able to zoom in and out of the image and pan across it.

You can download our example here