diff --git a/power-apps/animation-halloween/README.md b/power-apps/animation-halloween/README.md new file mode 100644 index 0000000..33400ab --- /dev/null +++ b/power-apps/animation-halloween/README.md @@ -0,0 +1,39 @@ +# Halloween Animation + +This custom PowerApps component brings Halloween to life with animated visuals and a chilling twist: it uses a non-standard font embedded directly in the component, requiring no installation on the user's device. +Designed for fun and fright, this component is perfect for: +- Creating Halloween-themed screens or splash pages +- Surprising your colleagues with spooky UI tricks +- Demonstrating how to embed and use custom fonts in PowerApps without local installation +Whether you're building a haunted app experience or showcasing creative component design, this YAML-based animation is a playful and technical treat for Makers everywhere 👻 + +Would you like a shorter version for a banner or a version in French as well? I can also help you write a README-style description or a post for sharing it with the Power Platform community! + + + + +![animation-halloween](./assets/animation-halloween.gif) + + +## Authors + +Snippet|Author +--------|--------- +Steve Bourdin | [GitHub](https://github.com/SteveBourdin) ([LinkedIn](https://www.linkedin.com/in/steve-bourdin-ab998762/) ) + +## Minimal path to awesome + +1. Open your canvas app in **Power Apps** +2. Copy the contents of the **[YAML-file](./source/animation-halloween.yaml)** +3. Paste the code on a blank screen + + +## Code + **[YAML-file](./source/animation-halloween.yaml)** + + +## Disclaimer + +**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** + + diff --git a/power-apps/animation-halloween/assets/animation-halloween.gif b/power-apps/animation-halloween/assets/animation-halloween.gif new file mode 100644 index 0000000..52b3b54 Binary files /dev/null and b/power-apps/animation-halloween/assets/animation-halloween.gif differ diff --git a/power-apps/animation-halloween/assets/animation-halloween.png b/power-apps/animation-halloween/assets/animation-halloween.png new file mode 100644 index 0000000..b2ecde7 Binary files /dev/null and b/power-apps/animation-halloween/assets/animation-halloween.png differ diff --git a/power-apps/animation-halloween/assets/sample.json b/power-apps/animation-halloween/assets/sample.json new file mode 100644 index 0000000..4bce349 --- /dev/null +++ b/power-apps/animation-halloween/assets/sample.json @@ -0,0 +1,52 @@ +[ + { + "$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json", + "name": "pnp-powerplatform-snippets-animation-halloween", + "version": "1.0.0.0", + "source": "pnp", + "creationDateTime": "2025-04-29T00:00:00.000Z", + "updateDateTime": "2025-04-29T00:00:00.000Z", + "title": "Keyboard", + "shortDescription": "A spooky animated component with an embedded custom font — no installation needed! Perfect for Halloween screens, themed apps, or pranking your colleagues while showcasing how to use non-standard fonts in PowerApps", + "longDescription": [ + "A spooky animated component with an embedded custom font — no installation needed! Perfect for Halloween screens, themed apps, or pranking your colleagues while showcasing how to use non-standard fonts in PowerApps" + ], + "url": "https://github.com/pnp/powerplatform-snippets/tree/main/power-apps/animation-halloween/", + "products": [ + "Power Platform", + "Power Apps", + "powerplatform-snippets", + "power-apps-snippets" + ], + "tags": [ + ], + "categories": [ + ], + "metadata": [ + { + "key": "Product", + "value": "Power Apps" + }, + { + "key": "Type", + "value": "Snippet" + } + ], + "thumbnails": [ + { + "type": "image", + "order": 100, + "url": "https://raw.githubusercontent.com/pnp/powerplatform-snippets/1a75e6a9210dc236726eb333740e5ac3a623fb98/power-apps/animation-halloween/assets/animation-halloween.png", + "alt": "Preview PNG" + } + ], + "authors": [ + { + "gitHubAccount": "SteveBourdin", + "name": "Steve Bourdin", + "pictureUrl": "https://github.com/SteveBourdin.png" + } + ] + } + +] diff --git a/power-apps/animation-halloween/source/animation-halloween.yaml b/power-apps/animation-halloween/source/animation-halloween.yaml new file mode 100644 index 0000000..83313d5 --- /dev/null +++ b/power-apps/animation-halloween/source/animation-halloween.yaml @@ -0,0 +1,181 @@ +- cont_Halloween: + Control: GroupContainer@1.3.0 + Variant: ManualLayout + Properties: + Height: =Parent.Height + Width: =Parent.Width + Children: + - img_fond: + Control: Image@2.2.3 + Properties: + BorderColor: =RGBA(0, 18, 107, 1) + Fill: =Color.Black + Height: =Parent.Height + Image: ="https://png.pngtree.com/background/20230618/original/pngtree-halloween-picture-image_3712631.jpg" + ImagePosition: =ImagePosition.Fill + Width: =Parent.Width + - img_logo_powerapps: + Control: Image@2.2.3 + Properties: + BorderColor: =RGBA(0, 0, 0, 0) + BorderStyle: =BorderStyle.None + BorderThickness: =2 + DisabledBorderColor: =RGBA(0, 0, 0, 0) + DisabledFill: =RGBA(0, 0, 0, 0) + FocusedBorderThickness: =4 + HoverBorderColor: =RGBA(0, 0, 0, 0) + HoverFill: =RGBA(0, 0, 0, 0) + Image: ="https://store-images.s-microsoft.com/image/apps.5460.13795821674373682.42a749e2-3ed9-43c6-88ec-0045278b4e49.7c939c07-5097-4a52-abd1-de0a42b889ba" + PressedBorderColor: =RGBA(0, 0, 0, 0) + PressedFill: =RGBA(0, 0, 0, 0) + X: =32 + Y: =24 + - img_text_Halloween: + Control: Image@2.2.3 + Properties: + BorderColor: =RGBA(0, 18, 107, 1) + Height: =Parent.Height + Image: "=\"data:image/svg+xml;utf8,\" & \r\nEncodeUrl(\r\n \"\r\n \r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n \"&inp_text.Value &\"\r\n\r\n\r\n \r\n \r\n\"\r\n)" + ImagePosition: =ImagePosition.Center + Width: =Parent.Width + - tim_color: + Control: Timer@2.1.0 + Properties: + AutoStart: =varAnimation<>false + BorderColor: =ColorFade(Self.Fill, -15%) + Color: =RGBA(255, 255, 255, 1) + DisabledBorderColor: =ColorFade(Self.BorderColor, 70%) + DisabledColor: =ColorFade(Self.Fill, 90%) + DisabledFill: =ColorFade(Self.Fill, 70%) + Duration: =50 + Fill: =RGBA(56, 96, 178, 1) + Font: =Font.'Open Sans' + HoverBorderColor: =ColorFade(Self.BorderColor, 20%) + HoverColor: =RGBA(255, 255, 255, 1) + HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%) + OnTimerStart: |- + =If(IsBlank(varNoColor), UpdateContext({varNoColor : 0}));UpdateContext({varNoColor:varNoColor+1});Switch(varNoColor,1,UpdateContext({varColor :"#FFA64D"}),2,UpdateContext({varColor :"#FF8000"}),3,UpdateContext({varColor :"#FF7514"}),4,UpdateContext({varColor :"#FF9900"}),UpdateContext({varColor :"#E67300",varNoColor:0})); + UpdateContext({varDecallage : Switch(varNoColor,1,0,2,1,3,0,4,1)}) + PressedBorderColor: =Self.Fill + PressedColor: =Self.Fill + PressedFill: =Self.Color + Repeat: =true + Start: =varAnimation<>false + Visible: =false + X: =40 + Y: =40 + - img_citrouille: + Control: Image@2.2.3 + Properties: + BorderColor: =RGBA(0, 18, 107, 1) + Height: =155 + Image: |- + ="data:image/svg+xml;utf8," & EncodeUrl( + "" & + "" & + "" & + "" & + "" & + "" + ) + OnSelect: |- + =UpdateContext({varAnimation : Not(varAnimation)}) + Width: =195 + X: =1140 + Y: =24 + - img_head: + Control: Image@2.2.3 + Properties: + BorderColor: =RGBA(0, 18, 107, 1) + Height: =152 + Image: |- + ="data:image/svg+xml;utf8," & EncodeUrl( + "" & + "" & + "" & + "" & + "" & + "" & + "" & + "" + ) + OnSelect: =Select(img_citrouille) + Width: =175 + X: =609 + Y: =565 + - img_toile: + Control: Image@2.2.3 + Properties: + BorderColor: =RGBA(0, 18, 107, 1) + Height: =121 + Image: ="data:image/svg+xml;utf8," + Width: =128 + Y: =228 + - img_spider: + Control: Image@2.2.3 + Properties: + BorderColor: =RGBA(0, 18, 107, 1) + Height: =136 + Image: |- + ="data:image/svg+xml;utf8," & EncodeUrl( + "" & + "" & + "" & + "" & + "" & + "" & + "" & + "" + ) + Width: =151 + X: =989 + Y: =148 + - img_tombe: + Control: Image@2.2.3 + Properties: + BorderColor: =RGBA(0, 18, 107, 1) + Height: =171 + Image: |- + ="data:image/svg+xml;utf8," & EncodeUrl( + "" & + "" & + "RIP" & + "" + ) + Width: =171 + X: =319 + Y: =446 + - logo_moca: + Control: Image@2.2.3 + Properties: + BorderColor: =RGBA(0, 18, 107, 1) + Height: =60 + Image: ="https://www.asi.fr/sites/default/files/styles/og_image/public/2022-02/MOCA_byASI_Lancement_Marque.jpg?itok=cjcfTEkN" + Width: =132 + Y: =Parent.Height-Self.Height + - inp_text: + Control: TextInput@0.0.54 + Properties: + Fill: =RGBA(255,165,0,0.8) + FontSize: =20 + FontWeight: =FontWeight.Bold + Height: =57 + TriggerOutput: ="KeyPress" + Value: ="Low-code, high fear. Happy Halloween!" + Visible: =varAnimation=false + Width: =433 + X: =16 + Y: =23 + - lst_size: + Control: DropDown@0.0.45 + Properties: + Appearance: ='DropdownCanvas.Appearance'.FilledDarker + DefaultSelectedItems: =[60] + Fill: =RGBA(255,165,0,0.8) + FontSize: =20 + Height: =57 + Items: =Filter(Sequence(100),Value>40) + Visible: =varAnimation=false + Width: =311 + X: =457 + Y: =23