From e2bfdc444a456dfc28b7dd36f01fcb166afdefd7 Mon Sep 17 00:00:00 2001
From: "Paul Gauthier (aider)" <paul@aider.chat>
Date: Fri, 28 Mar 2025 16:00:43 -1000
Subject: [PATCH] feat: replace flip animation with elegant fade transition for
 testimonials

---
 aider/website/index.html | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/aider/website/index.html b/aider/website/index.html
index 7b7b06ca6..241c71fc4 100644
--- a/aider/website/index.html
+++ b/aider/website/index.html
@@ -470,19 +470,24 @@ const testimonials = [
             // Update the displayed testimonial
             const testimonialElement = document.getElementById(`testimonial-${index}`);
             if (testimonialElement) {
-                // Start the flip animation
-                testimonialElement.style.transform = "rotateY(90deg)";
+                // Start fade out with slight upward movement
+                testimonialElement.style.transition = "opacity 0.4s ease, transform 0.4s ease";
+                testimonialElement.style.opacity = "0";
+                testimonialElement.style.transform = "translateY(10px)";
                 
-                // Update content when card is perpendicular to view (hidden)
+                // Update content when fully faded out
                 setTimeout(() => {
                     testimonialElement.innerHTML = `
                         <p class="testimonial-text">${newTestimonial.text}</p>
                         <p class="testimonial-author">— <a href="${newTestimonial.link}" target="_blank">${newTestimonial.author}</a></p>
                     `;
                     
-                    // Complete the flip
-                    testimonialElement.style.transform = "rotateY(0deg)";
-                }, 300);
+                    // Start fade in
+                    setTimeout(() => {
+                        testimonialElement.style.opacity = "1";
+                        testimonialElement.style.transform = "translateY(0)";
+                    }, 50);
+                }, 400);
             }
         }