Merge pull request #14 from readme-SVG/claude/fix-animation-gif-frames-8wUEw

Improve blob animations and GIF export frame synchronization

Author: CommitAxis

assets/css/styles.css

@@ -262,19 +262,27 @@ h1 span {
     pointer-events: none;
 }
 
-@keyframes floatBlob {
+@keyframes waveBlob1 {
     0%   { transform: translate(0px, 0px) scale(1); }
-    25%  { transform: translate(30px, -25px) scale(1.05); }
-    50%  { transform: translate(-20px, 35px) scale(0.96); }
-    75%  { transform: translate(25px, 20px) scale(1.03); }
+    25%  { transform: translate(40px, -30px) scale(1.06); }
+    50%  { transform: translate(-25px, 40px) scale(0.95); }
+    75%  { transform: translate(30px, 25px) scale(1.04); }
     100% { transform: translate(0px, 0px) scale(1); }
 }
 
-@keyframes floatBlobCenter {
+@keyframes waveBlob2 {
+    0%   { transform: translate(0px, 0px) scale(1); }
+    25%  { transform: translate(-35px, 30px) scale(0.94); }
+    50%  { transform: translate(45px, -20px) scale(1.07); }
+    75%  { transform: translate(-20px, -35px) scale(0.97); }
+    100% { transform: translate(0px, 0px) scale(1); }
+}
+
+@keyframes waveBlob3 {
     0%   { transform: translate(-50%, -50%) scale(1); }
-    25%  { transform: translate(calc(-50% + 30px), calc(-50% - 25px)) scale(1.05); }
-    50%  { transform: translate(calc(-50% - 20px), calc(-50% + 35px)) scale(0.96); }
-    75%  { transform: translate(calc(-50% + 25px), calc(-50% + 20px)) scale(1.03); }
+    25%  { transform: translate(calc(-50% + 20px), calc(-50% + 35px)) scale(1.05); }
+    50%  { transform: translate(calc(-50% - 35px), calc(-50% - 20px)) scale(0.95); }
+    75%  { transform: translate(calc(-50% + 30px), calc(-50% - 30px)) scale(1.03); }
     100% { transform: translate(-50%, -50%) scale(1); }
 }
 
@@ -288,7 +296,7 @@ h1 span {
     filter: blur(120px);
     opacity: 0.25;
     transition: background 0.5s;
-    animation: floatBlob 12s ease-in-out infinite;
+    animation: waveBlob1 4s ease-in-out infinite;
 }
 
 .card-bg-blob2 {
@@ -301,7 +309,7 @@ h1 span {
     filter: blur(140px);
     opacity: 0.15;
     transition: background 0.5s;
-    animation: floatBlob 9s ease-in-out infinite 3s;
+    animation: waveBlob2 4s ease-in-out infinite;
 }
 
 .card-bg-blob3 {
@@ -315,7 +323,7 @@ h1 span {
     filter: blur(100px);
     opacity: 0.1;
     transition: background 0.5s;
-    animation: floatBlobCenter 15s ease-in-out infinite 6s;
+    animation: waveBlob3 4s ease-in-out infinite;
 }
 
 .card-bg-grain {

assets/js/export.js

@@ -4,7 +4,12 @@ export async function downloadGif({ button, captureElement, repoDisplayElement }
     const originalMarkup = button.innerHTML;
     button.disabled = true;
 
-    const FRAME_COUNT = 15;
+    const FRAME_COUNT = 40;
+    const ANIMATION_DURATION = 4000; // ms, must match CSS animation duration
+
+    // Pause all animations so we can scrub them deterministically
+    const animations = captureElement.getAnimations({ subtree: true });
+    animations.forEach(anim => anim.pause());
 
     try {
         const response = await fetch('https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.worker.js');
@@ -21,14 +26,21 @@ export async function downloadGif({ button, captureElement, repoDisplayElement }
 
         for (let i = 0; i < FRAME_COUNT; i++) {
             button.textContent = `Frame ${i + 1}/${FRAME_COUNT}…`;
+
+            // Scrub every animation to the exact timestamp for this frame
+            const frameTime = (i / FRAME_COUNT) * ANIMATION_DURATION;
+            animations.forEach(anim => { anim.currentTime = frameTime; });
+
             const canvas = await window.html2canvas(captureElement, {
                 scale: 1,
                 backgroundColor: '#0d1117'
             });
             gif.addFrame(canvas, { delay: 100 });
-            await new Promise((r) => setTimeout(r, 100));
         }
 
+        // Restore live preview before rendering
+        animations.forEach(anim => anim.play());
+
         button.textContent = 'Assembling GIF…';
         gif.render();
 
@@ -47,6 +59,8 @@ export async function downloadGif({ button, captureElement, repoDisplayElement }
             button.disabled = false;
         });
     } catch (error) {
+        // Restore live preview even on failure
+        animations.forEach(anim => anim.play());
         console.error(error);
         button.textContent = 'Error';
         setTimeout(() => {