Protopie Pop Up

Expanding image overlays are a popular user pattern used in various applications, from social media to eCommerce. They engage users quickly and provide easy access to functions like sharing or commenting. In this article, we will guide you step by step on how to create your own expanding previews using the “toScreen” formula and a long press trigger.

In this lesson, you’ll learn:

  1. Utilizing the Long Press trigger to show the overlay.
  2. Moving the desired image onto the screen using the toScreen formula.
  3. Adding customized effects to the transition.

By the end of this tutorial, you’ll be able to create something like this!

Step by step instructions

Before starting

After opening the asset, go to the second scene (Profile). Our tutorial will start from there. In the second scene, set the opacity of the Overlay layer to 0 and move “image 1 copy” and “Menu” outside the scene as shown below.

1. Creating an overlay using Long Press

To create the expanding overlay, start by selecting the corresponding image (image 1) in the image feed and adding a Long Press trigger to it. Then, select the overlay shape in the layer panel and create an Opacity response with the opacity set to 100. Now, try tapping and holding the image on the profile screen to see the overlay.

2. Creating the expanding image preview

This step involves moving the image from outside the frame to a specific position on the screen. Since the target image is inside a scroll container and we have an overlay layer on top, we cannot use the Reorder response. Instead, we will use a replica of the image (image 1 copy) that will appear above the overlay. Follow these steps:

  1. Set the origin of “image 1 copy” to the bottom left corner.
  2. Resize “image 1 copy” to the same size as the on-screen image (226×226).
  3. Group “image 1 copy” and “Menu” together and rename the container as “Image & Menu”.
  4. Add a Move response to “Image & Menu” under the Long Press trigger.
  5. Set the X-coordinate of “image 1 copy” to the same as “image 1” (X = 16).
  6. Use the toScreenY formula to determine the Y-coordinate of “Image & Menu”.
    • toScreenY(‘Scroll Container’, ‘image 1’.x, ‘image 1’.y)
  7. Set the duration of the Move response to 0 seconds for instant replacement.
  8. Add a Scale response to the Long Press trigger to scale “image 1 copy” to its original size (343×343).
  9. Add a final Move response to set the endpoint vertical position of “Image & Menu” (Y-coordinate).

3. Customizing the effect

To customize the effect further, follow these steps:

  1. Add a Start trigger and a Scale response to “Menu” to give it an initial state of 0x0.
  2. Add a Reset response to “Menu” under the Long Press trigger.
  3. Attach a Move response to “Image & Menu” to return it to the position of “image 1”.
  4. Set the X-coordinate to 16 and the Y-coordinate using the toScreenY formula.
  5. Add a Reset response to “Image & Menu” to return it to its initial off-screen position.
  6. Add a final Reset response to the overlay to reset its opacity.

Congratulations!

You have successfully created an expanding image preview. Now you can apply this technique to your own design concepts and bring your ideas to life. We would love to see your experiments! Create your own prototype and share it on Twitter or Instagram with #MadeWithProtoPie.

Prototype Example