Power Apps – Create a Side Panel with Sliding Animation

This blueprint will show how to create a side panel/ popup with a slight sliding animation when opening. We will create a side panel with dummy content and buttons, but you can replace them with what you need, like textboxes or calculations.

Insert a button and name it Button1. Change the following properties:

Text property

"Open Popup"

OnSelect property

UpdateContext({varStartTimer:false});
UpdateContext({varStartTimer:true});
UpdateContext({varShowOverlay:true});

Insert a timer and name it Timer1. Have some space on the left side of the canvas because that is where we will place the side panel later.

Change the following properties:

Duration property

200

Start property

varStartTimer

We will hide the timer.
Select Timer1. Change the following properties:

Visible property

false

We are going to be inserting the background overlay.
Insert a container and name it Container1. Make it the same size as the whole screen. Change the following properties:

Fill property

RGBA(214, 221, 224, (Timer1.Value/Timer1.Duration)*0.5)

OnSelect property

varShowOverlay

The container should appear invisible for now.

We will be inserting the base of the side panel.
Insert a container and name it Container2. Make it start from the left side of the canvas and make its height the same height as the screen as seen in the image. Change the following properties:

Dropshadow property

DropShadow.Semibold

Fill property

RGBA(255, 255, 255, (Timer1.Value/Timer1.Duration))

Let’s put the header section of the side panel.
Insert a container inside Container2 and name it Container3. Place it on top of the side panel container as a header.

Insert a label inside Container3 and name it Label1. Change the following properties:

Text property

"Side Panel"

FontWeight property

FontWeight.Semibold

Insert a cancel icon inside Container3 and name it Icon1. Change the following properties:

Icon property

Icon.Cancel

OnSelect property

Reset(Timer1);UpdateContext({varShowOverlay:false});

Insert a label inside Container2 and name it Label2. Change the following properties:

Text property

"Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur."

AutoHeight property

true

Insert a button (modern) inside Container2 and name it Button2. Change the following properties:

Text property

"Ok"

Appearance property

"Primary"

OnSelect property

//Your code here
Reset(Timer1);UpdateContext({varShowOverlay:false});

Insert a button (modern) inside Container2 and name it Button3. Change the following properties:

Text property

"Cancel"

Appearance property

"Secondary"

OnSelect property

Reset(Timer1);UpdateContext({varShowOverlay:false});

Now to make the positioning of the side panel.
Select Container2. Change the following properties:

X property

(((Timer1.Value/Timer1.Duration) * Self.Width) - Self.Width)

You will notice that the side panel goes off the screen in studio mode. That should be correct and will slide to appear in the screen when we click on the ‘Open Popup’ button.

To test, hit play mode and then click the ‘Open Popup’ button. You should see that the side panel opens from the left side with a quick sliding animation.

You may add code to the ‘Ok’ button so that there is an action to be run when clicking it.

Alternatively, you can just have a side panel that displays information, and you can have a single Ok button to close the panel and then remove the ‘Cancel’ button.