From 187271e51527ee0129f71d77be1bd24072b963c4 Mon Sep 17 00:00:00 2001 From: Thomas Hallock Date: Mon, 3 Nov 2025 09:12:35 -0600 Subject: [PATCH] fix(games): use specific transition properties for smooth carousel loop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixed carousel looping issue by replacing generic 'transition: all' with specific transition properties. Only transition opacity on carousel items and transform/box-shadow/border-color on cards for hover effects. This prevents CSS transitions from interfering with embla's carousel transform animations at the loop wrap point. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- apps/web/src/app/games/page.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/web/src/app/games/page.tsx b/apps/web/src/app/games/page.tsx index 18c1cb69..78692393 100644 --- a/apps/web/src/app/games/page.tsx +++ b/apps/web/src/app/games/page.tsx @@ -163,7 +163,9 @@ function GamesPageContent() { flex: '0 0 auto', w: { base: '85%', md: '400px' }, mr: '6', - transition: 'all 0.3s ease-out', + transitionProperty: 'opacity', + transitionDuration: '0.3s', + transitionTimingFunction: 'ease-out', opacity: isActive ? 1 : 0.6, })} > @@ -188,7 +190,9 @@ function GamesPageContent() { position: 'relative', overflow: 'hidden', height: '100%', - transition: 'all 0.3s ease', + transitionProperty: 'transform, box-shadow, border-color', + transitionDuration: '0.3s', + transitionTimingFunction: 'ease', _hover: { transform: 'translateY(-4px)', boxShadow: '0 25px 50px rgba(59, 130, 246, 0.4)',