onHover property with CSS animations

This is my final installment in the CSS animations for Canvas apps buttons. If you have not read the other series, please go read the other three installments here to get a clear idea of where we came from.

In this last post I want to show how you can create onHover CSS animations for your buttons. This really helps your users make it clear where they can click in a fun way. The result we are looking for can be seen below.

Now, I am not going to lie, there is no secret way to achieve an onHover property with Canvas apps. You have the OOTB properties you can work with which allow you to change the fill when you are hovering on a button. But other than that, we don’t have many options.

PCF component

So here comes our trusted PCF component again. This PCF component can be found here and is created by Akshay Ramgude. Go support him when you can. If you want a detailed explanation on how to implement this PCF component in your Canvas app I can highly recommend this video from Ryan Johnson. It’s a high quality video that’s almost fifty minutes long explaining how to import the managed solution from Akshay Ramgude. I am going to assume you are able to import the managed solution and component in your canvas app with help of that video.

onHover property with CSS animations

So let’s start somewhat with what we created in our previous endeavours. We will have a container with the following elements:

For our HtmlBackground we will use the following code.

$"<div style =
'
width: {Self.Width * 0.7259595959}px;
height: {Self.Height * 0.7059595959}px;
background: {nfPrimaryColorHex};
border-radius: 140px 140px 140px 140px;
box-shadow: {If(pressedbutton, "2px 4px 4px rgba(0, 0, 0, .75)", "inset 2px 2px 4px rgba(0, 0, 0, .75)")};
margin: {Self.Height  * 0.14}px;
'>
</div>"

Then for our OnHover component we have set the Parent Container Id to container name cntButtonTest.

Then comes the code for the image control. Here we use a dollar sign to make it easier to implement our logic for the onHover CSS animation. Furthermore, I have switched from the shake animation to a bounce animation. This makes more sense with hovering over a button. Important to notice is that we changed our animation-fill-mode at the top to infinite. This makes the animation go infinitely. Furthermore, we have added extra brackets everywhere since we added a dollar sign after the EncodeUrl( function.

"data:image/svg+xml;utf8,  " & EncodeUrl($"
<svg xmlns='http://www.w3.org/2000/svg' fill='white' width='100' class='bi bi-list' animation-fill-mode='infinite' viewBox='-6 -6 28 28'>

   <style>
  @keyframes animate {{
    from {{
      transform: translateY(0px);
    }}
    to {{
      transform: translateY(
        var(--bounce-offset)
      );
      fill: {nfIconColorSelectedHex}  
    }}
  }}

  .animate {{
    animation:

      animate alternate infinite;
      cubic-bezier(.2, .65, .6, 1);
      --bounce-offset: -5px;
    animation-duration: 200ms;
  }}

</style>
  <path class = 'animate' d='M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5zm13-3H1v2h14zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5'/>
</svg>
"
)

Now the animation will just run without stopping. When we add the following code to our class we can make it start only when we hover over the button: {If(OnHover.IsHovered, "animate", "none")}. So let’s add that.

"data:image/svg+xml;utf8,  " & EncodeUrl($"
<svg xmlns='http://www.w3.org/2000/svg' fill='white' width='100' class='bi bi-list' animation-fill-mode='infinite' viewBox='-6 -6 28 28'>

   <style>
  @keyframes animate {{
    from {{
      transform: translateY(0px);
    }}
    to {{
      transform: translateY(
        var(--bounce-offset)
      );
      fill: {nfIconColorSelectedHex}  
    }}
  }}

  .animate {{
    animation:

      animate alternate infinite;
      cubic-bezier(.2, .65, .6, 1);
      --bounce-offset: -5px;
    animation-duration: 200ms;
  }}

</style>
  <path class = '{If(OnHover.IsHovered, "animate", "none")}' d='M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5zm13-3H1v2h14zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5'/>
</svg>
"
)

Because we used a dollar sign at the top we only had to use single brackes to add a formula. Now the icon will bounce up and down only when we hover over it.

We are almost there! If you look carefully, we are still missing one last piece of the puzzle. Our mouse cursor doesn’t change when we hover over the icon. To get that effect we’ll have to add a button and place that on top. Put any code that you want to fire off on the OnSelect property of the button. And use the following properties for the button.

Now we have a button which also makes our mouse cursor change. We are ready to use this button in our canvas app on our desktop.

Closing words

Using some help from our community members we were able to achieve some cool functionality that I didn’t think was possible. I think it is really cool to see how far you can push a low-code platform like this and to see how customizable you can make it. Maybe this is not for everyone and of course it’s a lot of controls for one button but heck, you have to experiment! If you think this is a cool feature let me know, I will be releasing this code on my Github and as a snippet soon.