Update fast-search-card.js

Author: fastender

dist/fast-search-card.js

@@ -5067,19 +5067,10 @@ class FastSearchCard extends HTMLElement {
             }
         }
 
-        const categoryButtons = this.shadowRoot.querySelector('.category-buttons');
         this.isMenuView = true;
-        categoryButtons.classList.add('visible');
 
-        // ALTE ANIMATION TEMPORÄR
-        categoryButtons.animate([
-            { opacity: 0, transform: 'translateX(20px) scale(0.9)' }, 
-            { opacity: 1, transform: 'translateX(0) scale(1)' }
-        ], { 
-            duration: 400, 
-            easing: 'cubic-bezier(0.16, 1, 0.3, 1)', 
-            fill: 'forwards' 
-        });
+        // 🌊 NEUE SPOTLIGHT ANIMATION statt alter Animation
+        this.startSpotlightAnimation();
     }
 
     hideCategoryButtons() {
@@ -5133,9 +5124,169 @@ class FastSearchCard extends HTMLElement {
         this.hideCategoryButtons();
     }
 
-    // 🌊 LIQUID ANIMATION METHODEN
+
+    
+    // 🌊 ECHTE SPOTLIGHT ANIMATION METHODEN
+    
+    startSpotlightAnimation() {
+        const searchPanel = this.shadowRoot.querySelector('.search-panel');
+        const liquidExtension = this.shadowRoot.querySelector('#liquidExtension');
+        const mainDroplet = this.shadowRoot.querySelector('#mainDroplet');
+        
+        // 1. Suchleiste für Morphing vorbereiten
+        searchPanel.classList.add('morphing');
+        
+        // 2. Animationssequenz starten
+        this.animateSearchMorphing(liquidExtension)
+            .then(() => this.animateDropletSeparation(liquidExtension, mainDroplet))
+            .then(() => this.animateDropletMigration(mainDroplet))
+            .then(() => this.animateDropletDivision())
+            .then(() => this.finalizeSpotlightAnimation());
+    }
+    
+    animateSearchMorphing(liquidExtension) {
+        return new Promise((resolve) => {
+            // Liquid Extension aus der Suchleiste "wachsen" lassen
+            liquidExtension.style.display = 'block';
+            
+            liquidExtension.animate([
+                { width: '0px', opacity: 0 },
+                { width: '100px', opacity: 1 }
+            ], {
+                duration: 400,
+                easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+                fill: 'forwards'
+            }).finished.then(() => {
+                setTimeout(resolve, 100);
+            });
+        });
+    }
+    
+    animateDropletSeparation(liquidExtension, mainDroplet) {
+        return new Promise((resolve) => {
+            // Haupttropfen vom Extension "abtrennen"
+            const rect = liquidExtension.getBoundingClientRect();
+            
+            mainDroplet.style.width = '72px';
+            mainDroplet.style.height = '72px';
+            mainDroplet.style.left = '100px';
+            mainDroplet.style.top = '0px';
+            mainDroplet.style.display = 'block';
+            
+            // Gleichzeitig: Extension schrumpft, Droplet erscheint
+            const extensionAnim = liquidExtension.animate([
+                { width: '100px', opacity: 1 },
+                { width: '0px', opacity: 0 }
+            ], {
+                duration: 300,
+                easing: 'ease-in',
+                fill: 'forwards'
+            });
+            
+            const dropletAnim = mainDroplet.animate([
+                { opacity: 0, transform: 'scale(0)' },
+                { opacity: 1, transform: 'scale(1)' }
+            ], {
+                duration: 300,
+                easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+                fill: 'forwards'
+            });
+            
+            Promise.all([extensionAnim.finished, dropletAnim.finished]).then(() => {
+                setTimeout(resolve, 100);
+            });
+        });
+    }
+
+    animateDropletMigration(mainDroplet) {
+        return new Promise((resolve) => {
+            // Haupttropfen nach rechts bewegen
+            mainDroplet.animate([
+                { transform: 'scale(1) translateX(0px)' },
+                { transform: 'scale(1) translateX(150px)' }
+            ], {
+                duration: 500,
+                easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+                fill: 'forwards'
+            }).finished.then(() => {
+                setTimeout(resolve, 150);
+            });
+        });
+    }
 
+    animateDropletDivision() {
+        return new Promise((resolve) => {
+            const droplets = [
+                this.shadowRoot.querySelector('#droplet1'),
+                this.shadowRoot.querySelector('#droplet2'), 
+                this.shadowRoot.querySelector('#droplet3'),
+                this.shadowRoot.querySelector('#droplet4')
+            ];
+            
+            // Finale Positionen für alle 5 Buttons (mainDroplet + 4 weitere)
+            const positions = [
+                { x: 150, y: 0 },  // mainDroplet (schon da)
+                { x: 234, y: 0 },  // droplet1
+                { x: 318, y: 0 },  // droplet2  
+                { x: 402, y: 0 },  // droplet3
+                { x: 486, y: 0 }   // droplet4
+            ];
+            
+            // Alle 4 zusätzliche Droplets animieren
+            const animations = droplets.map((droplet, index) => {
+                droplet.style.width = '72px';
+                droplet.style.height = '72px';
+                droplet.style.left = '150px'; // Starten alle am mainDroplet
+                droplet.style.top = '0px';
+                droplet.style.display = 'block';
+                
+                return droplet.animate([
+                    { 
+                        opacity: 0, 
+                        transform: 'scale(0) translateX(0px)' 
+                    },
+                    { 
+                        opacity: 1, 
+                        transform: `scale(1) translateX(${positions[index + 1].x - 150}px)` 
+                    }
+                ], {
+                    duration: 400,
+                    delay: index * 100,
+                    easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+                    fill: 'forwards'
+                });
+            });
+            
+            Promise.all(animations.map(anim => anim.finished)).then(() => {
+                setTimeout(resolve, 200);
+            });
+        });
+    }
 
+    finalizeSpotlightAnimation() {
+        const searchPanel = this.shadowRoot.querySelector('.search-panel');
+        const categoryButtons = this.shadowRoot.querySelector('.category-buttons');
+        
+        // Alle Droplets verstecken
+        const allDroplets = this.shadowRoot.querySelectorAll('.liquid-droplet');
+        allDroplets.forEach(droplet => {
+            droplet.style.display = 'none';
+        });
+        
+        // Suchleiste zurücksetzen
+        searchPanel.classList.remove('morphing');
+        
+        // Category-Buttons erscheinen lassen
+        categoryButtons.classList.add('visible');
+        categoryButtons.animate([
+            { opacity: 0, transform: 'translateX(20px) scale(0.9)' },
+            { opacity: 1, transform: 'translateX(0) scale(1)' }
+        ], {
+            duration: 300,
+            easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+            fill: 'forwards'
+        });
+    }