From 15f4c43eaa53ed89fb84d0b3d494f346dd14431a Mon Sep 17 00:00:00 2001 From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com> Date: Fri, 29 Aug 2025 15:22:44 +0000 Subject: [PATCH] Improve the smoothness of video scrolling animation Adjusted the scrolling speed and update interval in the Netflix grid component to achieve a smoother, 60 FPS animation. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/QCN70f2 --- client/src/components/netflix-grid.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index ca7de78..509f56b 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -158,7 +158,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { // Start continuous smooth scrolling with interval scrollIntervalRef.current = setInterval(() => { setTranslateX(prev => { - const speed = direction === 'right' ? -3 : 3; // Pixels per step + const speed = direction === 'right' ? -1.5 : 1.5; // Smaller steps for smoother motion const newX = prev + speed; const totalWidth = category.videos.length * videoWidth; @@ -171,7 +171,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { return newX; }); - }, 30); // Update every 30ms for smooth flow + }, 16); // Update every 16ms (60 FPS) for ultra smooth flow }; // Initialize in middle section for infinite scroll