Animate any SVG image in Power Apps

[Music] in today's video I'm going to show you how to find an SVG icon put it inside your power app and animate it yourself with your own custom animations and in this case we're going to do it with a hamburger icon so that you can open and close your menu in a very cool way [Music] so here's our starting point this is a template I've already created we already have a functioning open and close on our menu but we don't have the icon to show us what's actually going on or what's going to happen when we click on that I do already have the image ready for it which is my image menu close but I have no SVG code in there so there's nothing to display so first let's find the icon we need which we're going to find from iconify.design if I search for hamburger I can just choose one of the hamburger icons I like and make sure I've got SVG selected and then I can click on this icon here to copy the code to my clipboard once I've got that copied I can open up vs code and paste it in and then press Ctrl and H to open up the find and replace and I want to replace the double quotes with the single quotes and then hold down Ctrl Alt Enter and it will replace everything then press escape to remove that and then Ctrl and a to highlight everything and Ctrl and C to copy it and then I'll just alt tab back to where we were so now back in the app here let's go to encode URL and paste in our SVG code so the icon is there you might not be able to see it because at the moment it's black so let's change the stroke to White and then now you can see the icon let's tidy it up because we're going to be working with this quite a bit and let's also have a look at what we're working with so we've got our SVG tag we have a G tag and then we have a path another path and another path so those are obviously our three lines in our hamburger icon so what we're going to do is add a style tag to our SVG inside of this style tag is where we can put our code for animating but first we need to allocate some classes to each of our lines so let's call them say top mid for middle and Bot for bottom and then we need to assign those classes to our paths now let's set up our animations so every animation needs to have a name so again let's do this quite straightforward so again we'll just do animation top mid bot next we need to say how long the animation is going to last for so this is animation duration which will give it 500 milliseconds and finally we need to put in animation fill mode and set that to both and what this code will do is it will tell the animation that once it's finished it should stay where it is if we didn't put this in the animation would restart it would go back to the beginning even though it wouldn't run again so for instance if we clicked on the hamburger icon it would turn to a cross and then it would suddenly turn back into the hamburger menu icon again so now that we've got all of that we can start animating things and we do this with keyframes and of course we need to put the name of the animation that we've got we're setting the keyframes for which is our top animation and what do we want to do to it so let's say zero percent we want the rotation to be zero degrees so basically zero percent we want it to stay as it is but when it reaches 100 percent and I'm aware that I've spelled transforming correctly when we get to 100 percent we then want to rotate it because we need to turn this so that it begins to look like a cross and there we go we can see it rotating but we do have a slight issue it's rotating on an anchor point that means that it's going outside of where we can see it so we can use transform origin to just move it and let's just move it say vertically 10 pixels and horizontally 18 pixels yeah that looks pretty good for now so now the middle bar that's a bar that we don't actually need we don't want that at all we just want that to disappear so we're doing the keyframes for the middle bar and this time we want to say that the opacity should be one to start off with but when it reaches the end we want the opacity to be zero we want it to disappear so there we go it's disappearing so as you can see animating svgs can be quite simple so we'll do a similar thing to what we did with the top one for the bottom one we want to rotate it this time we want to rotate it backwards so minus 45 degrees but again we've got this issue with it aligning incorrectly so let's transform this one as well that's better so now we've got a nice cross that's been created so well that's all well and good it's just animated once and it's not actually doing anything else what we really need to do is tell that I want you to turn into a cross when the menu is open and I want you to turn back into the hamburger icon when the menu is closed so the simplest way of doing this is just to change the keyframes around zero percent becomes 100 100 becomes zero percent depending when the menu is open or not so if the menu open is true then this is a zero percent otherwise it's at 100 percent and then with this one it's at 100 otherwise it's zero percent and then it's the same the whole way down so now what this means is that when we click on it it changes to across and when we click on this again it changes back to a hamburger icon but I don't know if you noticed something there it's not animating every time and the reason for that is because your browser has cached it so what we need to do is refresh it every time and what I've done is on the menu button I'm setting a timestamp so that every time the user clicks on this this timestamp is going to update with the latest timestamp and we can then use this to force our SVG to update itself and the way we're going to do that is we're going to attach the timestamp to the CSS classes so we're just appending the timestamp to the CSS classes and don't forget to do it on the paths as well so now what's going to happen is it's going to update that element every time we click on it and it won't get confused it won't be caching it because it's caching a different class now we're almost there but there is one slight problem with it still I'll save it I'll close it and I'll open it and I'll show you what the problem is so hopefully you saw that the problem there was that the icon changed as we loaded it so what will happen is when the user opens the app the icon will animate as they open the app and we don't really want that to happen because it's not very professional so we can make just a small change to it and that will fix that what we want to do is say that if the menu hasn't been clicked on yet let's just set the animation duration to zero milliseconds this means that when they open the app it will be zero milliseconds so they won't see an animation so if that menu open variable is blank then let's just say it's a zero millisecond animation otherwise it can be the 500 milliseconds which is what we want when the user clicks on it let's just make sure that we do this across the board so to all three lines and let's double check that our animation still works perfect that's it so what we've done here is we've taken an SVG icon from iconify and we've modified the code so that we can animate it the way we want it to change think of the possibilities it's incredible foreign

Channel: Charles Sexton

Views: 10,259

Keywords:

Id: SI1tCOUg1_w

Length: 10min 16sec (616 seconds)

Published: Mon May 01 2023