feat(project): screen animations (#614)

* feat: add screen animations * chore: update snapshots * fix: animation on mount not stable * chore: remove key from media screen routing
jwplayer · Sep 27, 2024 · edbb246 · edbb246
1 parent 003e3e5
commit edbb246
Show file tree

Hide file tree

Showing 7 changed files with 197 additions and 169 deletions.
diff --git a/packages/ui-react/src/components/Animation/Animation.tsx b/packages/ui-react/src/components/Animation/Animation.tsx
@@ -15,6 +15,8 @@ type Props = {
 
 export type Status = 'opening' | 'open' | 'closing' | 'closed';
 
+const triggerReflow = (element: HTMLElement | null) => element?.scrollTop;
+
 const Animation: React.FC<Props> = ({
   className,
   createStyle,
@@ -26,6 +28,7 @@ const Animation: React.FC<Props> = ({
   keepMounted = false,
   children,
 }) => {
+  const nodeRef = useRef<HTMLDivElement>(null);
   const [status, setStatus] = useState<Status>('closed');
   const [hasOpenedBefore, setHasOpenedBefore] = useState<boolean>(false);
 
@@ -35,6 +38,9 @@ const Animation: React.FC<Props> = ({
   // use event callbacks to ignore reactive dependencies
   const openEvent = useEventCallback(() => {
     setHasOpenedBefore(true);
+    // trigger a reflow to ensure the transition is respected after mount
+    triggerReflow(nodeRef.current);
+
     timeout.current = window.setTimeout(() => setStatus('opening'), delay);
     timeout2.current = window.setTimeout(() => {
       setStatus('open');
@@ -70,7 +76,7 @@ const Animation: React.FC<Props> = ({
   }
 
   return (
-    <div style={createStyle(status)} className={className}>
+    <div style={createStyle(status)} className={className} ref={nodeRef}>
       {children}
     </div>
   );

diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss
@@ -27,7 +27,8 @@
   // Make header static
   //
   &.static {
-    position: static;
+    position: relative;
+    z-index: 1;
     width: 100%;
   }
 }

diff --git a/packages/ui-react/src/containers/ShelfList/ShelfList.tsx b/packages/ui-react/src/containers/ShelfList/ShelfList.tsx
@@ -16,6 +16,7 @@ import usePlaylists from '@jwp/ott-hooks-react/src/usePlaylists';
 import Shelf from '../../components/Shelf/Shelf';
 import InfiniteScrollLoader from '../../components/InfiniteScrollLoader/InfiniteScrollLoader';
 import ErrorPage from '../../components/ErrorPage/ErrorPage';
+import Fade from '../../components/Animation/Fade/Fade';
 
 import styles from './ShelfList.module.scss';
 
@@ -76,20 +77,22 @@ const ShelfList = ({ rows }: Props) => {
               data-testid={testId(`shelf-${featured ? 'featured' : type === 'playlist' ? slugify(title || playlist?.title) : type}`)}
               aria-label={title || playlist?.title}
             >
-              <Shelf
-                loading={isPlaceholderData}
-                error={error}
-                type={type}
-                playlist={playlist}
-                watchHistory={type === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined}
-                title={title || playlist?.title}
-                featured={featured}
-                accessModel={accessModel}
-                isLoggedIn={!!user}
-                hasSubscription={!!subscription}
-                posterAspect={posterAspect}
-                visibleTilesDelta={visibleTilesDelta}
-              />
+              <Fade duration={250} delay={index * 33} open>
+                <Shelf
+                  loading={isPlaceholderData}
+                  error={error}
+                  type={type}
+                  playlist={playlist}
+                  watchHistory={type === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined}
+                  title={title || playlist?.title}
+                  featured={featured}
+                  accessModel={accessModel}
+                  isLoggedIn={!!user}
+                  hasSubscription={!!subscription}
+                  posterAspect={posterAspect}
+                  visibleTilesDelta={visibleTilesDelta}
+                />
+              </Fade>
             </section>
           );
         })}