refactor(home): animation optimisation

jwplayer · Oct 24, 2024 · cec2c1f · cec2c1f
1 parent 65e47f4
commit cec2c1f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/packages/ui-react/src/components/FeaturedShelf/FeaturedMetadataMobile.tsx b/packages/ui-react/src/components/FeaturedShelf/FeaturedMetadataMobile.tsx
@@ -1,6 +1,6 @@
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import FeaturedMetadata from './FeaturedMetadata';
 import styles from './FeaturedShelf.module.scss';
@@ -73,7 +73,7 @@ const FeaturedMetadataMobile = ({ item, leftItem, rightItem, playlistId, loading
     }
   });
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!containerRef.current) return;
     containerRef.current.style.transform = 'translateX(0)';
     containerRef.current.style.transition = 'none';

diff --git a/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.module.scss b/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.module.scss
@@ -220,7 +220,7 @@
     transition: none;
   }
   @include responsive.mobile-and-small-tablet() {
-    top: calc(68vh - 30px);
+    top: 35%;
     &:hover {
       transform: translateY(-50%); // No scale on mobile
     }

diff --git a/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.tsx b/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.tsx
@@ -61,15 +61,20 @@ const FeaturedShelf = ({ playlist, loading = false, error = null }: Props) => {
   const slideLeft = () => slideTo(index - 1);
   const slideRight = () => slideTo(index + 1);
 
+  const transitioningRef = React.useRef(false);
+
   // Background animation takes longest, so it leads our animation flow
   const handleBackgroundAnimationEnd: TransitionEventHandler = () => {
-    if (animation?.phase != 'start') return;
+    if (transitioningRef.current) return;
+    if (animation?.phase !== 'start') return;
 
+    transitioningRef.current = true;
     setAnimation((current) => ({ ...current, phase: 'end' }));
     setTimeout(() => {
       setAnimation(null);
       setIndex(nextIndex);
-    }, 100); // Duration of end phase
+      transitioningRef.current = false;
+    }, 1); // Next render
   };
 
   const item = playlist.playlist[index];
@@ -83,18 +88,17 @@ const FeaturedShelf = ({ playlist, loading = false, error = null }: Props) => {
     left: 50,
     right: -50,
   };
-  const transitionBackground = 'opacity 0.3s ease-out, transform 0.3s ease-out';
   const translateX = isAnimating && animation?.direction ? backgroundX[animation.direction] : 0;
   const backgroundCurrentStyle: CSSProperties = {
     transform: `scale(1.2) translateX(${translateX}px)`,
     opacity: isAnimating ? 0 : 1,
-    transition: isAnimating ? transitionBackground : 'none',
+    transition: isAnimating ? 'opacity 0.3s ease-out, transform 0.3s ease-out' : 'none',
   };
   const translateXAlt = animation?.direction === 'left' ? -50 : animation?.direction === 'right' ? 50 : 0;
   const backgroundAltStyle: CSSProperties = {
     transform: `scale(1.2) translateX(${animation?.phase === 'initial' ? translateXAlt : 0}px)`,
     opacity: isAnimating ? 1 : 0,
-    transition: isAnimating ? transitionBackground : 'none',
+    transition: isAnimating ? 'opacity 0.3s ease-out, transform 0.3s ease-out' : 'none',
   };
 
   // Metadata animation