Animate any SVG image in Power Apps
Вставка
- Опубліковано 20 лип 2024
- I will show you how you can animate any SVG image/icon in Power Apps using code. In this tutorial, we make a hamburger icon animate to to a close icon and back.
00:00 - Demo
00:16 - Intro
00:49 - Getting the icon
01:45 - Formatting the SVG icon
02:14 - Writing out the animation code
06:17 - Toggling the animation
07:19 - Fixing it to animate every time
08:50 - Stopping the animation from showing on start
#PowerApps #PowerPlatform #PowerAddicts #CanvasApps
this is fantastic! great job charles!
This is fantastic! Thank you Charles!
Great video Charles. Very helpful tutorial. 👌👍
Amazingly beautiful. Thanks Charles.
My pleasure. Thank you, too! Great username, by the way.
I combined your animated hamburger menu solution with a custom vertical menu component that I am building using a container. It works really well. I will continue to refine the solution but it's touches like these that make your app stand out. Thanks so much for the video and the detailed walkthrough.
I'm really happy to hear that. Keep up the great work, Andrew. Let's make apps that people enjoy using.
This is amazing thank you for this video!!💥
Great tutorial, thanks from Brazil ❤
This is very cool animation. Thanks for this video. I would like to see more such videos on SVG in Power Apps from you.
Thanks @skawathe. I'm planning on releasing more videos in the near future. Just got to find the time for it. 😅
Amazing work! I look forward to seeing more content for Power Apps.
Thanks Mike. Much appreciated.
wonderful work !!!
Oh man that's a great video and the best practice to do in power apps, I am still trying to learn these SVG things but am unable to find the proper materials on SVG usage for power apps
Wow nice! Really cool! :)
Really amazing.
Great stuff Charles...Looking forward to more videos from you :)
Coming soon. I didn't realise I had all of these comments. If I knew earlier I would have already been working on more videos. 😂
Okay I'm gonna subscribe, this channel has a lot of potential form which I can learn form. THANK YOU!
I promise I will actually get onto making more videos this year. I've just been busy with blog posts (charlessexton.com) and public speaking. Thanks for subscribing, Tomas.
Fantastic!!😄😄😄
Hi, what a fantastic job.
I'm talking about Brazil and I was very lucky to find your video, it's really good.
I will implement it in my apps and would love to see your next videos.
I already visited your blog and I really liked it too.
Thank you, Gedean. I'm really happy to have helped. I've been working on a new video, so more are coming this year.
Brilliant.
Thank you Charles! More please!
Will do, Raz! Thank you. ❤️
Please make more of such helpful videos.
keep coming on powerapps, appreciate your work
Thank you. I appreciate you!
Nice work!
Thanks Craig
This is amazing, I can’t wait to use this at work 🤓
Thanks Barbara
@@charlessexton1483My second and third @keyframes are not triggering, do you reason for this?
Thank you! Nice and detailed explanation. Tip: I usually use the With function and template strings for this sort of thing, to reduce repetition and clarity.
Thanks Cristian. The With() function is great. 👍
String interpolation can look a bit messy with the SVG code due to the curly brackets.
You're right. In that case it is easier and cleaner to concatenate using "&"@@charlessexton1483
Bro 😮, u swept me off my feet
Great video cool stuf want more full length tutorials thank you
Thanks Rajesh. I would love do more.
Massive🎉
Charles! Keep them coming! Would be cool to animate the left bar by NOT using a timer.
Maybe one day we can use CSS for all controls. I can only hope.
I already subscribed , waiting next episode
Thanks Dr. Mohammed. I'll get back to creating videos soon.
This is a amazing video charles can u post more related to this its very helpful 😜
Thank you. I'll do my best to get more videos sorted.
🙏
Wow Charles, this is an amazing little touch to make an app look incredibly sexy. Thanks for sharing.
My pleasure. Thank you for letting me know. ❤️ All you commenters are awesome!
Could please make a complete video of this application which includes the creation of left navigation component.
I can definitely do more videos on application design in general.
Hi Charles, nice video, I have only one question, @6:45, what is the "gblMenuOpne"? Thank you
Hi Ryan,
That's a bolean variable that holds a value of true if the menu is open and false if it's not.
@@charlessexton1483 , I am new to PowerApps, did you create the variable to App > OnStart? Thank you
Can you make more video like this....
Means Changing color of SVG icon based on Variable
Can do. I'll make a note of it.
Thanks, is there a place to learn all of the options for the animation code?
I don't know of a good resource specifically for Power Apps, but I use Mozilla a lot: developer.mozilla.org/en-US/docs/Web/SVG/Element/animate
My second and third @keyframes are not triggering, can someone help me please
Your best bet would be to post on the Microsoft Community Forums. I help out on there as well. ➡️ powerusers.microsoft.com/t5/Building-Power-Apps/bd-p/PowerAppsForum1
Yes sir, but is it possible to use this in power bi? I mean how do I adjust this background to my power bi report?
I'm afraid I don't have the answer for that one. I know you can use SVGs in Power BI, but I've never attempted using any animated ones.
waiting for new video
I plan on uploading more regular content soon! Sorry for the wait, and thank you for the comment. ❤️
Please make full tutorials playlist to animate svg and using svg in power app... because it the only way to add life to your powerapps app in mean, other ways really un practical.... and there is no enough tutorials about this in UA-cam
I completely agree. Will do.
Make more videos please 🥺
I will, I promise! ❤️
Make more videos on powerapps
Will do 🫡