Microsoft 365 Community Adaptive Cards, 1 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: How to animate SVGs in Adaptive Cards

Description

In this 14-minute developer-focused demo, Kristine Kolodziejski shows how to animate a basic SVG and add the animated file to an Adaptive Card. Why use animation, what is structure of an SVG and what are SVG animation options (JS, CSS and SMIL)? See the mechanics of adding an SVG to an Adaptive Card, host limitations, and workarounds. In demo, animate with CSS keyframes because supported by every browser and mobile. Encode SVG in Adaptive Cards Designer or host it on site like svgur.com. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on September 1, 2022.

Demo Presenter
• Kristine Kolodziejski (Computacenter) | @kristinekk94

Supporting materials
• Example – a Pen by Kristine Kolodziejski | https://codepen.io/powerpuffkk/pen/oNdvmJj
• Images – svgshare (share SVG vector files) | https://svgur.com
• Twitter - Kristine Kolodziejski | @kristinekk94
• YouTube Kristine Kolodziejski (channel) | https://www.youtube.com/channel/UCGmsp6wr31Bj77QSMzMCElg
• Blog - Kristine Kolodziejski | https://www.kristinekolodziejski.com/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

So what I'm going to do today is I'm going to show you how you can animate svgs and why you might look at animating usb, just in adaptive cards going to talk about how to do it, we'll have a live demo and then we'll crack on with adding that to the svg's and the adaptive cards. So let me just quickly share my screen. um There we go so uh what we're going to do today, like I said we're going to look at animating svgs in adaptive cards.

A

Now I post a lot about svgc in powerapps, and I thought oh, I'm going to try and give that a go in adaptive cards so before we navigate to the demo uh for anyone that doesn't know me, my name is christine kolodysky. I work as a principal consultant at a company called computer center, I'm based in london in uk, and I tend to spam. Everyone's twitter and linkedin feed a lot with uh different geeky stuff. um That qr code is all of my social see.

A

If anyone wants to connect with me, please feel free to scan that in, and I know that david will share that in a chat as well. So let's have a look at why we might use animation or why we why it might be beneficial.

A

So, first of all, the stats 90 of the information transferred or transmitted to our brains is visual. That means that as long as you're, not visually or cognitively impaired in any way most of what you, what your brain is processing is what you see, which means that naturally animations are going to be more attractive to the eye. Anything graphical is going to be a lot more attractive to the eye.

A

Now scientific research has proven that if you use graphical objects to support instructions or text, so by using our images and icons, your performance or your brain's performance is going to increase by 88, so you're more likely to understand instructions or an application or anything else. If there are supplementary icons now I don't know about you, but I've put many ikea furniture before and I don't think I would have been able to do that without the uh kind of thorough guides, with with all of the pictures now uh around 87 percent.

A

Of all the information of. Oh sorry of all, I uses process animation before they see any text, so you may have seen on the first slide. I did kind of catch you there. I added an animation and I can guarantee that around at least 80 percent of you looked at the animation first before you even looked at any of the text or anything else that was on that slide and the last part the best reason it is just 100 fun. I absolutely love animating svgs. I learned a lot about from robin as well.

A

Robin is the svg king and uh it is just really really fun now before we go into the demo. There is something that I want to mention and that's around limitations. Now. uh The one thing I didn't want to use obviously talk to you about the demo and then someone tagged me in twitter to say christine. I've watched the demo. You lied to me, so I have put a couple of limitations.

A

However, last night I came up with another idea on how to overcome the um limitations and I'm going to show you that today, as well, so the first kind of limitations that everyone will be aware of is that there is a payload limit on adaptive cards. This means that we are limited as to the size of an image or an svg that we can pass in line uh if the uh card payload exceeds the limitations that we have.

A

The cards will literally just not render in any application, then uh by using inline cr in the uh svgs. We do have some limitations around the css attributes that you can use so things like gaussian blur, linear gradients and some of the other things are unfortunately not supported in line html within the adaptive card. Just yet again, I have found a way to work around that too. Then uh they are not supported in model windows, so this is only applicable to uh the svgs that are written in line as well. Within the adaptive card.

A

Like I said before, I have found a workaround to this as well and the last the worst reason the best limitation is. They are just addictive. So once you start animating things, I promise you. There is literally no way back from there. So let's look into the demo instead, so what we're going to do is I'm going to animate a very basic svg first and then I'll show you how I can add that to the adaptive card itself, okay, so for the uh kind of animation I'm going to do today is uh disney logo.

A

uh As we know, we have the power platform conference in just over two weeks. uh One thing that I'm super excited for, apart from the conference, which is going to be incredible, is visiting disneyland, I'm a huge disney fan, and I thought this would be a perfect kind of use case for animation today, so to I kind of go over the structure of an svg for anyone that hasn't worked with an svg before svg's comprised really of, I guess three main elements, so we always have the opening svg tag here.

A

So this is what we will declare things like the namespace. This will declare with height. If we wanted the v box and all of that, then we have a object. So that could be a path. As you can see, now paths will comprise of pretty much tags.

A

These are all the kind of cubic beziers all of the curves that you get in an svg or geometrical shape, so that could be like a rectangle and eclipse uh pretty much anything a circle as an example, and then at the very end of this vg we will have the closing svg tag. Now, if you want to add any cells, we know that we can't link any style sheets within the svg. We have to use inline styles.

A

So to do that, we have to open a style tag in here and then we'll close that before I forget, and then we can start declaring the cells directly within here. So let's uh start with a selector, so for the selector we will just use path. We only have one path in here. uh If we want to, we can add, obviously a class as an example, so we can just say uh class. Let's say uh we can just do it uh test as an example and we can just uh to test as an example.

A

So you can do that just like you would normally in css, then we'll open the curly brackets and before we start adding an animation, let's actually create an animation, so to do animation with svgs. We have three options: normally we have javascript, we have uh css and then we also have what's called smell. Smell stands for synchronized multimedia integrated language. Now uh we know that we can't add inline javascript in here. So that's out of the box.

A

For us, and then smell uh is great, but smell, isn't supported on mobile devices as well, so for today's demo we are going to use css just because it is supported on pretty much every browser, including internet explorer. If anyone is using it. Hopefully no one is so to do that. We will start by declaring keyframes. So that's how we do animation in css and then we'll open the curly brackets now within. Here we have two options. We can either declare that starting and the finishing point of animation.

A

This will be uh done using from and two or we can declare what's called checkpoints. Well, I call them checkpoints. I don't think they're actually called checkpoints. So to do that we can just say: uh let's just give the animation some names so for the name, let's just start with, as an example fade. So that will be the name of animation and, let's just say, we'll, go from and then we'll go from opacity zero.

A

So we want that to be uh transparent at first and then we want that to go two and we'll go to opacity one. So we want this to kind of breathe into our screen now, once we've done that all we have to do is assign that animation to our svg. So I'm just going to pop that into here and we'll do fade that situation. We can just see three seconds as an example, and then we can just see infinite, so it's doing it infinitely and, as you can see, that's animated already now.

A

One thing I really dislike is when you can see that resetting point, so you can see that after three seconds, it's just literally resetting the animation. So to counteract that we can actually use alternate and alternate will alternate the finishing point of the animation. So you will now see the kind of breathe in and breathing uh breathe out effect, so you can see that it's not disappearing and resetting the animation anymore. It actually kind of breathing in and breathing um out.

A

So that's one way of doing an animation now, let's just add some color as an example, so to add color again I can add this within this keyframe, so we can declare as many as we want, or we can add another keyframe. I will add another keyframe just because I want to show you a different structure of keyframes, so we will just do let's say keyframes and then we'll just call it uh color as an example and then we'll open the curly brackets. Now for this one we're going to use checkpoints, so we checkpoints.

A

We declare each of the points of the animation which wants something else to happen. So to do that, we can do. Let's say we'll do increment it by 20. So we'll. uh Let me just quickly do that 20 and then we'll change, let's say, fill to be uh blue and then I will just quickly copy and paste because we know we don't want to rewrite all of that, and then we will increment this by 20, so that would be 60, 80 and 100., and all we have to do now is just change these colors.

A

So I can just say I want this to be green and I want this to be yellow. I want this to be pink and I want this to be, let's say uh purple as an example and then once we've done, that we again need to assign the animation. So we can add the animation straight after this one. We can just separate it with a comma and then add. I think we call the color. Did we call it?

A

The english white color, the american white color, perfect, add the duration as well, so we'll just make five seconds, so it's not deterring on the screen and we'll just make it infinite, and we should hopefully see in a second is that this will be changing. Colors, we'll just give it a second to uh load, color five seconds, a color color. Have we done everything um perfect? Oh, I think I have too many of these. There we go. Let's just quickly have a look.

A

Oh I'm not sure why that's not changing color, let's just quickly check what have I done. I haven't made a mistake: 20 30, 60 80, 100 uh keyframes. Oh, I'm not sure why that's not changing color um color, okay, let's just quickly remove that for some reason, I'm not sure what happened there, how very bizarre okay! So we have demo demons as you can see, I am not quite sure, what's happened uh there.

A

Let me just quickly pop a random snippet in here to see, if that will that will work instead and then let me just quickly call that uh if it was an example, I'm not sure if my browser just needs refreshing.

A

Okay, for some reason, that's not actually loading, I'm not sure. What's happened with the uh browsing here, I will just quickly go on to oh, that's. Why is it because I had one thousand percent over there?

A

Okay, so uh to counteract that again I can fix that quickly. So I already have a kind of pre-generated uh animations for this anyway, so we don't have to worry about that. We will just quickly go to the disney logo. So this is what I was going to quickly build for you, I'm not really sure what happened. Last. Apologies to anyone watching this back so once we have the animation ready now we can actually add that to our um adaptive card.

A

So if you've ever worked with powerapps as an example uh to add an svg to your powerapps, the first thing that we need to do is we need to encode the actual svg itself. So to do that, I will just click on. Let's just quickly add an image to here and the way we do it is we'll just open it in here. So to start with, we will do with uh data. Then we will do image and then slash svg, plus there we go now.

A

We can declare the chart as well if we want to and then after this. This is where we will pop our svg text. So if I was to just quickly navigate back to my to my disney logo here, we'll copy all of that ctrl c and then we'll go over here and then we just pop that at the end there pop that into here- and as you can see, we now have this animation in um in the adaptive card. Now that's one way of doing it again.

A

This is quite simple animation and one thing that I like doing is really kind of creating pretty things like neon glows gaussian blush, like I said, and more kind of advanced animation. uh So if you don't want to do it this way, I will show you another way of how to do it. So if you've worked with adaptive cards before you'll know that you can link any image externally from any kind of host website. So last night I was getting very creative and I thought how why don't?

A

I find an svg hosting website as an example. Add that svg there and link it back and it worked so what I've done is. I have put together a couple of those videos just to quickly show you how that works. So the website that we're going to use is called svg share or svg.

A

I think that's how you say it. So all we have to do here is we have to add these regions to here. So I'll just go to choose file.

A

Now we have to choose the svg, so I'm just going to go for, let's say the rainbow svg, and that was actually the cloud and I will just refresh the website again. The demo demons are coming in, which is absolutely fine. We always expect that to happen at some point. Let's try that again and we'll go to rainbow, go to share and that will generate the link for us. So now that will generate the link.

A

So all I have to do is I have to go and get the uh image source of that a specific image. So I'll just get that from here. We have to make sure that it has the format at the end as well. Otherwise it will not render, and all we have to do is if I was to just go to the sunny icon as an example and go to the url here.

A

All I have to do is just replace that and again this is quite small, so I'm just going to make it slightly larger and we'll do large and, as you can see, we now have that animation. So if you wanted to have some me and glow as an example, let me just change that to dark and we will add one of the things that I have done recently.

A

So we'll just go to add: svg we'll go to choose file and we'll go for the xbox one as an example, and I will not show you what that's doing yet we'll go to share and then I'll scroll to the bottom and get that svg file from here. Ctrl c go to adapter card and I'll just pop that on the top here and then, if you give it a second, this is an animated kind of drawing neon svg. So in a second you'll see the xbox logo and then it will pop like a neon light.

A

There we go again. We have an issue with a bit of a v box around the edges, but that's uh expected as well. That's something we can fix, and that is it for today's demo. So uh I've shared the links as well and I'll pop them in the chat, and I know that david's currently offered to uh share the links as well. I hope you enjoyed it and I'm handing over to you david awesome. Thank you christine.