Designing zoom and pan effects

With Justinmind, you can to simulate zoom and pan functionalities using drag and drop in your prototypes.dynamic panel zoom pan
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 add an “On Drag” + “Move” event, selecting the Image as the element to be moved. Below, change the X and Y positions to “With cursor”.
  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.
  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. Follow these steps to create the horizontal zoom effect:

    1. Below, select “Calculated” from the “Width” drop-down and click the “Add Expression” text. In the Calculated Expression builder, drag the Image from within the Dynamic Panel in the Outline palette to the first space in the expression. Select “Width” from the drop-down below the term.
    2. Drag the “Multiply” Function next to the Image in the open space.
    3. Finally, type in “2” in the last open space.

    Now, the vertical zoom effect:

    1. Select “Calculated” from the “Height” drop-down and click the “Add Expression” text. In the Calculated Expression builder, drag the Image from within the Dynamic Panel in the Outline palette to the open space in the expression. Select “Height” from the drop-down below the term.
    2. Then, drag the “Multiply” Function to the next term.
    3. Finally, type in “2” in the last open space, and change the “Easing” option to “linear”.

  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”.

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.