New snippet (gallery-with-animated-cards) (#109)

Author: Laskewitz

power-apps/gallery-with-animated-cards/README.md

@@ -0,0 +1,36 @@
+# Gallery with animated cards
+
+A fairly simple use of a dynamic SVG image in a gallery to highlight the selected item with an animation.
+
+![Gallery with animated cards](./assets/gallery-with-animated-cards.gif)
+
+## Authors
+
+Snippet|Author
+--------|---------
+David Zoonekyndt | [GitHub](https://github.com/DavidZoon) ([LinkedIn](https://www.linkedin.com/in/david-zoonekyndt/) )
+
+## Minimal path to awesome
+
+1. Open your canvas app in **Power Apps**
+1. Copy the contents of the **[YAML-file](./source/gallery-with-animated-cards.yaml)**
+1. Click on the three dots of the screen where you want to add the snippet and select "Paste"
+1. Customize the appearance and behavior of the map by changing the parameters in the With() of the Image object:
+   ![Customize With()](./assets/gallery-with-animated-cards-customize.png)
+
+### ⚠️⚠️⚠️ Important
+
+ Be careful, however, the visuals are less attractive on a gallery template that is too stretched in height or width.
+ The card is responsive; it will adapt to the gallery template format. The colors also change with the modern theme of your application.
+
+<img width="800" alt="phone_portrait.png" src="./assets/gallery-with-animated-cards-theme-change.gif" />  
+
+## Code
+
+ **[YAML-file](./source/gallery-with-animated-ards.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.**
+
+<img src="https://m365-visitor-stats.azurewebsites.net/powerplatform-snippets/power-apps/gallery-with-animated-ards" aria-hidden="true" />

power-apps/gallery-with-animated-cards/assets/gallery-with-animated-cards-customize.png

@@ -0,0 +1,49 @@
+[
+  {
+    "$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json",
+    "name": "pnp-powerplatform-snippets-gallery-with-animated-cards",
+    "version": "1.0.0.0",
+    "source": "pnp",
+    "creationDateTime": "2025-07-13T00:00:00.000Z",
+    "updateDateTime": "2025-07-13T00:00:00.000Z",
+    "title": "Form Factor selector",
+    "shortDescription": "A fairly simple use of a dynamic SVG image in a gallery to highlight the selected item with an animation.",
+    "longDescription": [
+      "Be careful, however, the visuals are less attractive on a gallery template that is too stretched in height or width. The card is responsive; it will adapt to the gallery template format. The colors also change with the modern theme of your application."
+    ],
+    "url": "https://github.com/DavidZoon/powerplatform-snippets/blob/main/power-apps/gallery-with-animated-cards/",
+    "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://github.com/DavidZoon/powerplatform-snippets/blob/cd24bdfbc69c69f48183bc70258e648d2fa0cf5b/power-apps/gallery-with-animated-cards/assets/gallery-with-animated-cards.gif",
+        "alt": "Preview GIF"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "DavidZoon",
+        "name": "David Zoonekyndt",
+        "pictureUrl": "https://github.com/DavidZoon.png"
+      }
+    ]
+  }
+]

power-apps/gallery-with-animated-cards/assets/gallery-with-animated-cards-theme-change.gif

@@ -0,0 +1,18 @@
+- GalleryWithAnimatedCards:
+    Control: Gallery@2.15.0
+    Variant: Vertical
+    Properties:
+      Height: =689
+      TemplateSize: =300
+      Width: =498
+      WrapCount: =2
+      X: =40
+      Y: =40
+    Children:
+      - ImageCard:
+          Control: Image@2.2.3
+          Properties:
+            Height: =Parent.TemplateHeight
+            Image: "=With({\r\n    _Text:If(ThisItem.IsSelected,\"Selected\",\"Not Selected\"),\r\n    _Height:Text(Self.Height,\"0.0\",\"en-US\"),\r\n    _Width:Text(Self.Width,\"0.0\",\"en-US\"),\r\n    _BackGroundColor:If(ThisItem.IsSelected,Mid(JSON(App.Theme.Colors.Darker60),2,7),Mid(JSON(App.Theme.Colors.Lighter40),2,7)),\r\n    _GradientColors:{Color1:\"rgb(0, 183, 255)\",Color2:\"rgb(255, 48, 255)\"}\r\n    \r\n},\"data:image/svg+xml;utf8, \"  & EncodeUrl($\"<svg viewBox='0 0 {_Width} {_Height}' xmlns='http://www.w3.org/2000/svg'>\r\n<defs>\r\n<linearGradient id='gradient-border' x1='0%' y1='0%' x2='100%' y2='0%'> <stop offset='0%' stop-color='{_GradientColors.Color1}' /> <stop offset='100%' stop-color='{_GradientColors.Color2}' /></linearGradient>\r\n<clipPath id='cut-bottom'> <rect id='Rectangle' x='3%' y='3%' width='94%' height='94%' rx='15' /> </clipPath>\r\n</defs>\r\n\r\n<use id='Bakcground' href='#Rectangle' fill='{_BackGroundColor}' />\r\n{If(ThisItem.IsSelected,\"<g clip-path='url(#cut-bottom)'>\r\n<rect id='TurningColors' x='-50%' y='30%' width='200%' height='40%' fill='url(#gradient-border)' transform-origin='center'> <animateTransform  attributeName='transform' type='rotate' from='0 0 0'  to='360 0 0' dur='3s' repeatCount='indefinite' /> </rect></g>\")}\r\n<use id='Foreground' href='#Rectangle' fill='{_BackGroundColor}' transform-origin='center' transform='scale(.95 .95)' />  <text x='50%' y='50%'  dominant-baseline='middle'  text-anchor='middle'  fill='white'  font-size='32'  font-family='sans-serif' font-weight='bold'> {_Text} </text> </svg>\")\r\n)"
+            OnSelect: =Select(Parent)
+            Width: =Parent.TemplateWidth