update animation

benchmarking.js

@@ -5,9 +5,31 @@ document.addEventListener('DOMContentLoaded', function () {
         return;
     }
 
-    renderBenchmarkingChart();
+    initBenchmarkingChart();
 });
 
+function initBenchmarkingChart() {
+    const container = document.getElementById('benchmarking-chart');
+    if (!container) return;
+
+    // Use Intersection Observer to trigger animation when chart comes into view
+    let hasAnimated = false;
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting && !hasAnimated) {
+                hasAnimated = true;
+                renderBenchmarkingChart();
+                observer.disconnect(); // Stop observing after animation starts
+            }
+        });
+    }, {
+        threshold: 0.2  // Trigger when 20% of the chart is visible
+    });
+
+    observer.observe(container);
+}
+
 function renderBenchmarkingChart() {
     const container = document.getElementById('benchmarking-chart');
     if (!container) return;

charts.js

@@ -106,8 +106,8 @@ const lazyLoadObserver = new IntersectionObserver((entries) => {
         }
     });
 }, {
-    rootMargin: '100px 0px', // Start loading 100px before entering viewport
-    threshold: 0.01
+    rootMargin: '0px 0px', // Start exactly when entering viewport
+    threshold: 0.15  // Trigger when 15% visible
 });
 
 // Debounce utility for hover effects
@@ -252,15 +252,16 @@ function initScalingCharts() {
             const modelNormX = normTurns.slice(offset, offset + len);
             offset += len;
 
+            // Start with markers only (lines will be animated in)
             traces.push({
                 x: modelNormX,
                 y: data[model].accuracy,
-                mode: 'lines+markers',
-                name: model,  // CRITICAL: Set model name for legend
+                mode: 'markers',  // Start with markers only
+                name: model,
                 line: { color: DDR_DATA.modelColors[model] || '#888', width: 2 },
                 marker: { size: 6, color: DDR_DATA.modelColors[model] || '#888' },
                 hovertemplate: `<b>${model}</b><br>Turn: %{customdata}<br>Accuracy: %{y:.2f}%<extra></extra>`,
-                customdata: data[model].turns // Store real values for hover
+                customdata: data[model].turns
             });
         });
 
@@ -273,9 +274,9 @@ function initScalingCharts() {
             ...darkLayout,
             xaxis: {
                 ...darkLayout.xaxis,
-                title: { text: 'Number of Interaction Turns', font: { size: 15, color: '#1d1d1f' } }, // Explicit larger font
-                type: 'linear', // ALWAYS LINEAR
-                range: [-0.05, 1.05], // FIXED RANGE
+                title: { text: 'Number of Interaction Turns', font: { size: 15, color: '#1d1d1f' } },
+                type: 'linear',
+                range: [-0.05, 1.05],
                 tickmode: 'array',
                 tickvals: tickVals,
                 ticktext: tickText,
@@ -283,14 +284,20 @@ function initScalingCharts() {
             },
             yaxis: {
                 ...darkLayout.yaxis,
-                title: { text: 'Accuracy (%)', font: { size: 15, color: '#1d1d1f' } }, // Explicit larger font
+                title: { text: 'Accuracy (%)', font: { size: 15, color: '#1d1d1f' } },
                 dtick: dtickVal,
                 range: yRange
             },
-            showlegend: false  // Use shared legend instead
+            showlegend: false
         };
 
-        Plotly.newPlot(`scaling-${scenario}`, traces, layout, plotlyConfig);
+        // Create chart with markers only first
+        Plotly.newPlot(`scaling-${scenario}`, traces, layout, plotlyConfig).then(() => {
+            // After a short delay, animate in the lines
+            setTimeout(() => {
+                animateScalingLinesIn(`scaling-${scenario}`, models, data, normTurns);
+            }, 300);
+        });
     });
 
     // Populate shared legend with models from first scenario
@@ -301,7 +308,64 @@ function initScalingCharts() {
     }
 
     // Apply hover effects after charts are rendered
-    setTimeout(() => applyHoverEffectsForSection('scaling'), 100);
+    setTimeout(() => applyHoverEffectsForSection('scaling'), 500);
+}
+
+// Animate lines drawing in for scaling charts
+function animateScalingLinesIn(containerId, models, data, normTurns) {
+    const graphDiv = document.getElementById(containerId);
+    if (!graphDiv) return;
+
+    // Update to show lines+markers
+    let offset = 0;
+    const tracesWithLines = models.map(model => {
+        const len = data[model].turns.length;
+        const modelNormX = normTurns.slice(offset, offset + len);
+        offset += len;
+
+        return {
+            x: modelNormX,
+            y: data[model].accuracy,
+            mode: 'lines+markers',
+            name: model,
+            line: { color: DDR_DATA.modelColors[model] || '#888', width: 2 },
+            marker: { size: 6, color: DDR_DATA.modelColors[model] || '#888' },
+            hovertemplate: `<b>${model}</b><br>Turn: %{customdata}<br>Accuracy: %{y:.2f}%<extra></extra>`,
+            customdata: data[model].turns
+        };
+    });
+
+    // First, add lines with opacity 0
+    Plotly.react(containerId, tracesWithLines, graphDiv.layout, plotlyConfig).then(() => {
+        // Get all line paths
+        const paths = graphDiv.querySelectorAll('.scatterlayer .trace .lines path');
+
+        // Set initial state: lines hidden via stroke-dashoffset
+        paths.forEach((path) => {
+            const len = path.getTotalLength();
+            if (len > 0) {
+                path.style.transition = 'none';
+                path.style.strokeDasharray = len + ' ' + len;
+                path.style.strokeDashoffset = len;
+            }
+        });
+
+        // Force reflow
+        graphDiv.getBoundingClientRect();
+
+        // Animate the lines drawing in with staggered delay
+        requestAnimationFrame(() => {
+            paths.forEach((path, index) => {
+                const len = path.getTotalLength();
+                if (len > 0) {
+                    // Stagger the animation for each line
+                    const delay = index * 80; // 80ms delay between each line
+                    path.style.transition = `stroke-dashoffset 0.8s ease-out ${delay}ms`;
+                    path.style.strokeDashoffset = '0';
+                }
+            });
+        });
+    });
 }
 
 function updateScalingCharts(dimension) {
@@ -1228,18 +1292,11 @@ function renderEntropyCharts(scenario) {
 // ============================================================================
 document.addEventListener('DOMContentLoaded', () => {
     // Register all sections for lazy loading
+    // Charts will only be initialized when they become visible
     const sections = document.querySelectorAll('section.section');
     sections.forEach(section => {
         lazyLoadObserver.observe(section);
     });
-
-    // Immediately initialize the first visible section (scaling) for instant feedback
-    // Other sections will be lazy-loaded as user scrolls
-    if (document.getElementById('scaling')) {
-        initializedCharts.add('scaling');
-        // Use setTimeout to not block the main thread
-        setTimeout(() => initScalingCharts(), 0);
-    }
 });
 
 // Handle window resize with longer debounce for better performance

index.html

@@ -137,8 +137,12 @@
             </div>
             <div class="framework-grid">
                 <div class="framework-card">
-                    <img src="assets/framework_task.png" alt="Task Formulation Framework"
-                        style="border-radius: var(--radius-md);">
+                    <div class="framework-img-wrapper">
+                        <div class="skeleton-loader"></div>
+                        <img src="assets/framework_task.png" alt="Task Formulation Framework" class="framework-img"
+                            loading="lazy"
+                            onload="this.classList.add('loaded'); this.previousElementSibling.style.display='none';">
+                    </div>
                     <h3>Task Formulation</h3>
                     <p class="framework-description">A case of Claude Sonnet 4.5's trajectory and evaluation checklist
                         in the MIMIC scenario of DDR-Bench. Verified fact and supporting insights are
@@ -147,8 +151,12 @@
                     </p>
                 </div>
                 <div class="framework-card">
-                    <img src="assets/framework_pipeline.png" alt="Evaluation Pipeline Framework"
-                        style="border-radius: var(--radius-md);">
+                    <div class="framework-img-wrapper">
+                        <div class="skeleton-loader"></div>
+                        <img src="assets/framework_pipeline.png" alt="Evaluation Pipeline Framework"
+                            class="framework-img" loading="lazy"
+                            onload="this.classList.add('loaded'); this.previousElementSibling.style.display='none';">
+                    </div>
                     <h3>Evaluation Pipeline</h3>
                     <p class="framework-description"><b>Left</b>: Compared with previous tasks, <i>DDR</i> maximises
                         exploration openness and agency, focusing on the direct evaluation of insight quality.
@@ -597,6 +605,7 @@
             const cards = Array.from(track.querySelectorAll('.carousel-card'));
             const cardCount = cards.length;
             let currentIndex = 0;
+            let hasStartedAutoPlay = false;
 
             // Create dots
             for (let i = 0; i < cardCount; i++) {
@@ -689,12 +698,34 @@
             const carouselWrapper = document.querySelector('.carousel-wrapper');
             if (carouselWrapper) {
                 carouselWrapper.addEventListener('mouseenter', stopAutoPlay);
-                carouselWrapper.addEventListener('mouseleave', startAutoPlay);
+                carouselWrapper.addEventListener('mouseleave', () => {
+                    if (hasStartedAutoPlay) startAutoPlay();
+                });
             }
 
-            // Initialize
+            // Initialize carousel position (but don't auto-play yet)
             updateCarousel();
-            startAutoPlay();
+
+            // Use Intersection Observer to start auto-play only when visible
+            const resultsSection = document.getElementById('results');
+            if (resultsSection) {
+                const carouselObserver = new IntersectionObserver((entries) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            if (!hasStartedAutoPlay) {
+                                hasStartedAutoPlay = true;
+                            }
+                            startAutoPlay();
+                        } else {
+                            stopAutoPlay();
+                        }
+                    });
+                }, {
+                    threshold: 0.3  // Start when 30% visible
+                });
+
+                carouselObserver.observe(resultsSection);
+            }
         });
     </script>
 

styles.css

@@ -495,6 +495,12 @@ img {
     width: 100%;
 }
 
+.chart-container-benchmarking {
+    height: 850px;
+    width: 100%;
+}
+
+
 /* ========================= */
 /*     FRAMEWORK SECTION     */
 /* ========================= */
@@ -558,6 +564,51 @@ img {
     backface-visibility: hidden;
 }
 
+/* Framework Image Loading Effect */
+.framework-img-wrapper {
+    position: relative;
+    width: 100%;
+    min-height: 400px;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+}
+
+.framework-img {
+    opacity: 0;
+    transition: opacity 0.6s ease-in-out;
+}
+
+.framework-img.loaded {
+    opacity: 1;
+}
+
+/* Skeleton Loader Animation */
+.skeleton-loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg,
+            #f0f0f2 0%,
+            #e8e8ed 20%,
+            #f0f0f2 40%,
+            #f0f0f2 100%);
+    background-size: 200% 100%;
+    animation: skeleton-shimmer 1.5s ease-in-out infinite;
+    border-radius: var(--radius-md);
+}
+
+@keyframes skeleton-shimmer {
+    0% {
+        background-position: 200% 0;
+    }
+
+    100% {
+        background-position: -200% 0;
+    }
+}
+
 .framework-description {
     font-size: 16px;
     line-height: 1.6;