Animations

web/src/components/BrowseView.tsx

@@ -20,6 +20,7 @@ import { clock } from "../lib/format";
 import type { Category, Group, Results, SongHit } from "../lib/search";
 import { categoryMatches, groupOf } from "../lib/search";
 import {
+  ANIMATE_VIEW_TRANSITIONS,
   glassTint,
   GROUP_HUE,
   GROUP_ICON,
@@ -137,7 +138,11 @@ export function BrowseView({
 
   if (isRootShelf) {
     return (
-      <div ref={scroller} style={{ flex: 1, overflow: "auto", minHeight: 0, padding: "14px 32px 250px" }}>
+      <div
+        ref={scroller}
+        className={ANIMATE_VIEW_TRANSITIONS ? "view-enter" : undefined}
+        style={{ flex: 1, overflow: "auto", minHeight: 0, padding: "14px 32px 250px" }}
+      >
         {shelves.map(({ group: shelfGroup, categories: shelfCategories }, index) => (
           <div
             key={shelfGroup}
@@ -291,6 +296,8 @@ export function BrowseView({
 
       <div
         ref={scroller}
+        key={`${group}:${category}:${mode}`}
+        className={ANIMATE_VIEW_TRANSITIONS ? "view-enter" : undefined}
         style={{ flex: 1, overflow: "auto", minHeight: 0, padding: "14px 32px 250px" }}
       >
         {songs.length > 0 && (