Quick tip: Animated text with image background in Power Apps

Today I am going to show you how you can quickly spice up your next landing page in Power Apps!

The idea is simple - we want the background of the text to be animated, and for this we are going to use the the good old background-clip property in CSS.

As you will already know, there’s no way to natively add CSS to Power Apps, so we are going to leverage the control that I quite literally owe my whole career to - the Power Apps HTML control.

Firstly, let’s add the HTML control to our screen.

Next, let’s remove the padding (by default, Canvas Apps add 5px padding to each of the sides).

And lastly, the code. In today’s world of AI, nobody has time or wants to learn how to write HTML - and so I will be your ChatGPT/Copilot/any other AI assistant for the day and give you the ready code ;)

The code itself consists of two parts - the main div which helps us center all the content, and then the span element for text. In my example I am using a custom font URW Geometric which I already have installed on my PC, so if you don’t have it installed it will default to a sans serif font, and that usually being Open Sans - feel free to use any other font.

The idea behind the clipping is that you first set the background image of the element (our span in this example), and then you are clipping the background ot the size of the text. Yep, that simple.

"<div style='
  display: flex;
  align-items: center;
  justify-content: center;
  height: "&Self.Height-1&"px;
  width: "&Self.Width&"px;
  overflow: hidden;
'>

  <span style='
    font-family: URW Geometric, sans-serif;
    font-weight: 900;
    font-size: 220px;
    line-height: 1;
    width: 100%;
    text-align: center;
    background-image: url(https://i.makeagif.com/media/12-30-2020/YHhnjk.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    background-clip: text;
    color: transparent;
  '>
    POWER APPS
  </span>

</div>
"

So how do we achieve animation?

Well…

That’s even simpler. We are just using a GIF. There are other ways of achieving this by leveraging SVG which I will write a tutorial for soon, but this will be your quickest way to impress your next customer or business stakeholder. In my case I am using an ocean waves gif (I love the ocean), but you can use any other gif - if you want something more professional, type in ‘technology background gif’ in Google and it’ll give you plenty of cool samples you can use, alternatively search on https://giphy.com/explore/tech-background.

Here’s the result with ocean waves:

"

POWER APPS

"

Here’s an example with a cool background:

"

POWER APPS

"

Now go ahead and show it to your next customer 🔥🙌