From 5f8d4b2c47254b365e4bd7fc85ed601d830340bd Mon Sep 17 00:00:00 2001 From: Gigi Date: Sun, 5 Oct 2025 02:10:17 +0100 Subject: [PATCH] fix: delay pulse animation to let scroll complete first MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add 500ms delay before starting pulse animation - Prevents pulse from starting while element is still scrolling - Creates better visual flow: scroll → pause → pulse - Makes the highlight easier to track with your eyes The pulse now starts after the smooth scroll completes, making it much clearer which highlight you jumped to. --- src/components/ContentPanel.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx index 6bf73346..10070c69 100644 --- a/src/components/ContentPanel.tsx +++ b/src/components/ContentPanel.tsx @@ -44,13 +44,15 @@ const ContentPanel: React.FC = ({ console.log('📍 Scrolling to highlight in article:', selectedHighlightId.slice(0, 8)) markElement.scrollIntoView({ behavior: 'smooth', block: 'center' }) - // Add pulsing animation to show it's selected + // Add pulsing animation after scroll completes const htmlElement = markElement as HTMLElement - htmlElement.classList.add('highlight-pulse') - setTimeout(() => { - htmlElement.classList.remove('highlight-pulse') - }, 1500) + htmlElement.classList.add('highlight-pulse') + + setTimeout(() => { + htmlElement.classList.remove('highlight-pulse') + }, 1500) + }, 500) // Delay to let scroll animation complete } else { console.log('⚠️ Could not find mark element for highlight:', selectedHighlightId.slice(0, 8)) }