Give your Power App visual flair by creating an animation!

How to make triggered animations in Microsoft Power Apps with PowerFx.

In this post, we’ll run through how to animate a cork popping out of a champagne bottle.  This works by transforming the position of an image over time to give the illusion of motion. We’ll also cover how to trigger this motion on a button press and how to add a sound effect.

Here’s a preview of the animation we're going to create:

Creating the animation

Overview

The main movement which brings this animation to life is the cork popping from the champagne bottle. This works by updating the position of the cork image control across a path. This path is calculated from a set of initial coordinates to a set of destination coordinates on the page.

To calculate the new position of the cork over time, we can use a timer control.

In a Power Apps Canvas app, the timer control is designed to space out actions, such as periodically refreshing data or opening new screens after specific time intervals. In this post, we get creative with the functionality to loop through iterations based on a piece of stop logic.

The build

Create and add media assets

1. Find the assets you want for each state in the animation cycle. For this scenario, we have identified 3 assets.  These are:
   

   1. A sealed bottle,

b. A cork,

c. And an unsealed bottle.

NOTE: these images should have a transparent background for the best visual effect.

Optionally, a sound file can be created to add a layer of depth to the animation. This will be discussed toward the end of this post.

Import the assets into the Canvas app to use in your controls further on. First, click on the media icon in box 1 from the screenshot below. This can be found in the menu. Afterwards, click “Add media” in box 2 and upload your files.

The Animation

The main movement which makes this animation work is the cork popping from the champagne bottle. This translates the position of the cork image control across a calculated path. This path is plotted as a diagonal line from the origin x,y points to the destination x,y coordinates. Here, we use `varPopX` and `varPopY` as the origin points. These are added to the `OnVisible` property for the main screen.

Set(varPopX,0);
Set(varPopY,0);

And we use `varCorkMaxX` and `varCorkMaxY` as the destination points. These are also added to the `OnVisible` property.

Set(varPopMaxX,100);
Set(varPopMaxY,200);

To calculate the new position of the cork over time, we can use a timer control. In Power Apps, a timer control is designed to space out actions, such as periodically refreshing data or opening new screens after specific time intervals. In this post, we get creative with the functionality to loop through iterations based on a piece of stop logic.

The Build

We first need to insert the image assets we imported earlier to the screen, then set the `Image` property for these controls. For this animation, the popped and un-popped bottles should overlap one another.

Later, we will hide the un-popped bottle once the cork is flying away - so the bottle doesn't appear to still be sealed. We also need to position the cork image control at the end of the bottle as an origin point.

Here, we can update the `X` and `Y` properties of the cork image to be that of the `X` and `Y` value of the champagne image control below it. We then +/- the offsets we initialised earlier.

(imgChampagne.X+75)+varPopX
(imgChampagne.Y+290)+varPopY

Then, insert a button control and set the `OnSelect` property to update the following variable.

UpdateContext({varStartPopTimer: true});

Afterward, we associate this `varStartPopTimer` variable with the `Start` property of the new button control. When this variable is set to `true`, the timer will commence.

varStartPopTimer

Now to add the timer control, this can be found by clicking the Insert button from the command ribbon. Once inserted, the `Start` property of the timer can be set to the variable we declared earlier - `varStartPopTimer`.

Then, we set the `Duration` property of the existing timer control to 1. This value is measured in milliseconds, reducing this ensures the animation will run as fluidly as possible.

To control the timer run count, we create separate variables for the current run count and the max run count in the `OnVisible` property of the main screen.

//20 frames animation using a timer loop
UpdateContext({varLoopEnd:20});
UpdateContext({varRuns:1});

As mentioned in the Overview section, this animation requires origin and destination coordinates to create a path along the X and Y axis of the screen. This is for the cork image to follow as it flies out of the bottle. These variables can be added to the `OnVisible` property of the main Screen.

Set(varPopX,0);
Set(varPopY,0);
Set(varCorkMaxX,100);
Set(varCorkMaxY,200);

For the transform logic a linear path can be drawn by calculating the new `x`, `y` coordinates in the `OnTimerEnd` property of the timer control.

//travel from start to target coords
Set(varPopX,varPopX+(varCorkMaxX/varRuns));
Set(varPopY,varPopY+(varCorkMaxY/varRuns));

After this, the total run count can be incremented in the same property of this control.

//loop count
UpdateContext({varRuns: varRuns+1});

Finally, a stop logic `If()` statement is written to terminate the loop once the max run count is reached by setting `varStartPopTimer` to `false`. This is also written in the `OnTimerEnd` property.

//when loop iteration finishes
If(varRuns = varLoopEnd,
    //Exit loop 
    UpdateContext({varStartPopTimer: false});
);

Let's take a look at our progress so far!

We have a popping animation! Unfortunately, before and after the cork has shot out, it can still be seen in the neck of the bottle! To fix this, we’ll update our logic to hide the visibility of the uncorked bottle when the cork has been popped and of the cork before it’s popped.

Adding Visibility logic

Let’s set a variable to track if the cork has been popped or not.

In the `OnTimerStart` property of the timer control, set the variable `varPopped` to true. This initialises the variable for later use.

Set(varPopped, true)

We can then use this variable in the `Visible` property of the cork image control. As this will be true when the pop timer starts, it will only be visible then.

varPopped //appears when popped

We then write the same code for the `Visible` property of the corked bottle image, so that it’s not visible on screen at the same time as the uncorked bottle.

For the uncorked image, we can use the `!` operator in PowerFx, shorthand for `Not` before `varPopped` in the `Visible` property. This means that if `varPopped` is true, it will return false and vice versa.

!varPopped //disappears when popped

Finally, we set `varPopped` back to false in the `OnTimerEnd` property to reset the loop.

//when loop iteration finishes
If(varRuns = varLoopEnd,
    //Exit loop 
    UpdateContext({varStartPopTimer:false});
    Set(varPopped, false);
);

While in this property, let’s update the stop `If()` statement to reset the total run count, position of the cork image and the timer. This is important for retriggering the animation, otherwise the run count will be too high and the cork will be out of bounds.

//when loop finish
If(varRuns = varLoopEnd-1,
    //Exit loop
    UpdateContext({varStartPopTimer:false});
    Set(varPopped, false);
    Set(varPopX,0);
    Set(varPopY,0);
    Reset(timPop); //main timer control

    //Cork animation reset
    UpdateContext({varLoopEnd:20});
    UpdateContext({varRuns:1});
);

Congratulations! You now have a more complete animation - supporting dynamic visibility and replay. If you’re eager for more, let’s move to the final step - adding sound!

Adding Sound

We first need to import an Audio control and set the `Media` property to the name of the sound file we imported at the start.

NOTE: This control must be visible otherwise it won’t play.

Then, add the following line to the `OnTimerStart` property of the timer control.

UpdateContext({AudioStart: !AudioStart})

This variable can then be used to trigger the sound once added to the `Start` property of the audio control.

AudioStart

Finally, reset the audio control to be run again. Set `AudioStart` to false and reset the control in the `OnEnd` property. Here, we’ve named it `audPopSound`.

UpdateContext({AudioStart: false});
Reset(audPopSound);

Congratulations! You’ve made it to the end of this tutorial on creating animations in Microsoft Power Apps.

Get in touch

Speak to one of the MPowerUp team for more guidance and best practice when building your Power Apps: https://www.mpowerup.cloud/get-started.