add animation script

doc/gui/extension/example_library/example_library.py

@@ -18,7 +18,7 @@ class ExampleLibrary(ElementLibrary):
     def __init__(self) -> None:
         # Initialize the set of visual elements for this extension library
 
-        logo_path = self.get_resource("resources/taipy_logo.png")
+        logo_path = self.get_resource("assets/logo.png")
         with open(logo_path, "rb") as f:
             logo_base64 = base64.b64encode(f.read()).decode("utf-8")
 
@@ -91,4 +91,7 @@ class ExampleLibrary(ElementLibrary):
 
     def get_scripts(self) -> list[str]:
         # Only one JavaScript bundle for this library.
-        return ["front-end/dist/exampleLibrary.js"]
+        return [
+            "front-end/dist/exampleLibrary.js",
+            "front-end/scripts/logoAnimation.js",
+        ]

doc/gui/extension/example_library/front-end/scripts/logoAnimation.js

@@ -0,0 +1,26 @@
+const style = document.createElement('style');
+style.innerHTML = `
+@keyframes logoAnimation {
+    from {
+        transform: scale(1);
+    }
+    to {
+        transform: scale(1.5);
+    }
+}
+
+.logo-animate {
+    animation: logoAnimation 2s infinite alternate;
+}
+`;
+document.head.appendChild(style);
+
+document.addEventListener("DOMContentLoaded", () => {
+    const checkForElement = setInterval(() => {
+        const logoImage = document.querySelector('img[alt="LogoWithText"]');
+        if (logoImage) {
+            logoImage.classList.add('logo-animate');
+            clearInterval(checkForElement);
+        }
+    }, 100);
+});

doc/gui/extension/example_library/front-end/src/LogoWithText.tsx

@@ -13,8 +13,8 @@ const styles = {
         alignItems: "center",
     },
     logo: {
-        width: "1em",
-        height: "1em",
+        width: "4em",
+        height: "4em",
         marginRight: "10px",
     },
 };
@@ -26,7 +26,7 @@ const LogoWithText = ({ text, defaultText, logoPath }: CaptionProps) => {
         <div style={styles.container}>
             <img
                 src={`data:image/png;base64,${logoPath}`}
-                alt="LogoWithText Image"
+                alt="LogoWithText"
                 style={styles.logo}
             />
             <div>{value}</div>