UXPin logo

Pop-Up

In the first part of this tutorial, you will learn how to create a cookie consent pop-up. Then, you will learn how to make it show when the page is scrolled to a specified position. Finally, we will show you how to create a pop-up that slides in from the side of the screen.

→ Download a ready .uxp file for this tutorial.

  1. Add a Box on the canvas from the left-side toolbar or by pressing the "B" key.
  2. Now, use the Alt "I" shortcut to add an Icon.
  3. Go to the Icons section in the Properties panel and change the default cog into an X.
  4. Add two Buttons from the Forms section in the left-side toolbar. You can also use the Alt "B" shortcut.
  5. Group all elements together using the Ctrl "G" shortcut and name the group Cookie banner.

Adding Interactions

  1. Select the X icon and go to the top of the Properties panel to add an interaction.
  2. Leave the Trigger set to Click (Tap).
  3. In the Action section, choose Hide.
  4. Below, in Element select the Cookie banner.
  5. As the Animation, choose Fade.
  6. In Animation settings, set the Duration to 150ms.
  7. Click Add.

Paste the Interactions to Buttons

  1. Right-click on the X icon to open the context menu and choose Copy interaction.
  2. Paste the interaction onto each button separately. From the context menu, choose Paste and then Paste Interactions.
  3. Preview your design.

On-Scroll Pop up

If you want the pop-up to show up when the window is scrolled to a certain position, you first need to set it to a Fixed position by clicking the Pin icon in the Properties panel, hide it with the eye icon and then add an interaction.

Adding Interactions

  1. Add an interaction on the canvas by clicking the + icon in at the top of the Properties panel.
  2. As the Trigger choose Scroll.
  3. In the Scrolled to, section type in the position at which you want to the pop-up to show up.
  4. As the Action, choose Show.
  5. Under Element, choose your pop-up.
  6. Select the Fade effect as the Animation.
  7. Click Add and preview your prototype.

Slide In Pop-up

Create a pop up with an Email input and a horizontal arrow Icon that will send the entered address.

Make the Pop-up Slide in

  1. Select the pop-up and move it outside of the canvas by using math in the x-axis field .i.e +650.
  2. Then, go the Properties Panel to add an Interaction.
  3. As the Trigger, choose Page Load.
  4. In the Action, section choose More and select Move by.
  5. Under Element choose your pop up.
  6. In the Move by section you will need to subtract the value you added in Step 1 in the x-axis value .i.e. -650.
  7. In the Delay field, type in 2000 and click Add.

Make the Pop-up Slide out

  1. Select the horizontal arrow Icon and add another Interaction.
  2. As the Trigger, choose Click(Tap).
  3. In the Action, section choose More and select Move by.
  4. Under Element choose your pop up.
  5. In the Move by section, you will need to add the value on the x-axis to make the pop-up slide out of the canvas.
  6. In the Duration field, type in 1000 and click Add.
  7. Preview your prototype.