Animating text using SVG and CSS for Power Apps!
Вставка
- Опубліковано 20 лип 2024
- In today's video, we will look at how you can animate text in Power Apps with SVG and CSS without the use of timers. This method works seamlessly offline and reduces the amount of controls in your app too!
Links used:
- Source code for animation 1 - codepen.io/powerpuffkk/pen/zY...
- Source code for animation 2 - codepen.io/powerpuffkk/pen/Yz...
- Source code for animation 3 - codepen.io/powerpuffkk/pen/WN...
- UI Gradients - uigradients.com/#VelvetSun
- LinkedIn - / kristine-. .
- Twitter - @kristinekk94
- GitHub - misskristine94
- Blog - kristinekolodziejski.com.
- Buy me a coffee - www.buymeacoffee.com/KristineK
Thank you very much for watching, any feedback is most welcome!
Kristine 😊
Chapters:
0:00 Intro
0:10 Welcome
1:34 Overview of the structure
2:28 Building the structure of the SVG
8:40 Styling the SVG
12:03 Adding background to SVG
16:12 Animation 1
19:20 Adding the linearGradient
23:57 Animation 2
28:05 Animation 3
32:20 Adding the SVG to Power Apps
37:23 Changing the text dynamically
40:17 Outro & Thank you!
#powerapps #powerplatform #poweraddicts #frontend #svg
Well that was just great Kristine. Thank you for sharing.
What a great video and what a great way to go to work. You really moved the bar once again Kristine !!! I want to test it right now to make the intro message dynamic based on time zone (good morning/good afternoon ) with message in different languages based on geolocation. Thanks for all your hard work Kristine. Keep pushing the boundaries. 👏🙌
Thank you so much for watching Davide!! And that is such a cool use case, I love it!! Would love to see it when you build it! 😄I really appreciate all your kind words! Much more to come and thank you again for watching 🙌
Thank you Kristine, this is wonderful, appreciate the effort and congrats on a perfect presentation.👍
Apologies Thamerr, I missed your comment - thank you so much for your kind words! :)
You saved me, I was looking to achieve animation using HTML text label, but it's impossible yet without linking CSS, or without using . thank you so much for meeting my needs. so far this is the best video I found which makes powerapps more powerful, in terms of adding visual effects.
Yes! thank you Kristine!
Awesome video! Thank you!
Thank you so much Seth!! :)
I checked - everything is clean
Thanks for the great video, keep them up!
Thank you so much Mark! Much appreciated :)
Whoa, wonders😮
Hello, great video! btw do you know is it possible to make dropdowns/combo-boxes look pretty? Is there a way to customize them with html text like standard buttons?
Great video! I've been trying to set the gradient to a variable like this stop-color='"& varCol1 &"' but alas it does not work, is there any way to assign that stop-color to a variable so the color choice can be dynamic?
Hi Kristine,
great video. Unfortunately, when I copy and paste the code into Powerapp like you did, it doesn't show me. It also doesn't show an error message. I don't know where the problem could be?
is there can we add the Svg to Button text field?
Hi Kristine. Can you add full code to first link? I can't add image to display animated logo and text label in the same control.
Strange issue: I'm able to copy Animation 1 in and it shows right away. When I copy Animation 2 or 3 it's just blank. No error message or anything like that.
Hey Seth, it was the missing / in the closing linearGradient tag - I added a note about it to the video and updated the first source code but forgot to update the other two - I'm so sorry! I've just updated both - if you try either of them, they should work perfectly fine - let me know if you have any issues 😊
Great video again. What is your best practice in commenting out style property's in powerapps? two backslashes doesn't seem to work in the double quotes the code is in.
Thank you so much Steven!! :) As we are rendering the SVG using EncodeURL, all the code in double quotes is plain text (which is why the standard Power Apps commenting out doesn't work). To comment out in SVG, you'll need to use this syntax - . Let me know if you have any issues at all 😊
@@KristineKolodziejski thanks again.
simply perfect as always. Could this be the new content? Email svg image with Power Automate. dynamic content :)
How do you animate an SVG icon when you have PATH?
doing good after all the jobless and market crash talks
I’m sorry I’m not sure what you mean?