From b3162eae86b138fb018b94bc4e56d0e8ff21d72c Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 3 Oct 2023 15:02:43 -0500
Subject: [PATCH] Optimize core animations

---
 src/camera/CameraOGTile.tsx     |  4 ++--
 src/camera/meta.ts              |  2 +-
 src/components/AnimateItems.tsx | 13 +++++--------
 src/photo/index.ts              |  8 ++++++--
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/camera/CameraOGTile.tsx b/src/camera/CameraOGTile.tsx
index 48f350f9..a3c58789 100644
--- a/src/camera/CameraOGTile.tsx
+++ b/src/camera/CameraOGTile.tsx
@@ -1,8 +1,8 @@
 import { Photo } from '@/photo';
 import { absolutePathForCameraImage, pathForCamera } from '@/site/paths';
 import OGTile from '@/components/OGTile';
-import { Camera, titleForCamera } from '.';
-import { descriptionForCameraPhotos } from './meta';
+import { Camera } from '.';
+import { descriptionForCameraPhotos, titleForCamera } from './meta';
 
 export type OGLoadingState = 'unloaded' | 'loading' | 'loaded' | 'failed';
 
diff --git a/src/camera/meta.ts b/src/camera/meta.ts
index 6abe65a4..1e1c8d3c 100644
--- a/src/camera/meta.ts
+++ b/src/camera/meta.ts
@@ -22,7 +22,7 @@ export const descriptionForCameraPhotos = (
   photos: Photo[],
   dateBased?: boolean,
 ) =>
-  descriptionForPhotoSet(photos, 'camera', dateBased);
+  descriptionForPhotoSet(photos, undefined, dateBased);
 
 export const generateMetaForCamera = (
   camera: Camera,
diff --git a/src/components/AnimateItems.tsx b/src/components/AnimateItems.tsx
index 98d5c6ed..c650de48 100644
--- a/src/components/AnimateItems.tsx
+++ b/src/components/AnimateItems.tsx
@@ -62,16 +62,15 @@ function AnimateItems({
     switch (typeResolved) {
     case 'left': return {
       opacity: 0,
-      translateX: distanceOffset,
+      transform: `translateX(${distanceOffset}px)`,
     };
     case 'right': return {
       opacity: 0,
-      translateX: -distanceOffset,
+      transform: `translateX(${-distanceOffset}px)`,
     };
     default: return {
       opacity: 0,
-      scale: scaleOffset,
-      translateY: distanceOffset,
+      transform: `translateY(${distanceOffset}px) scale(${scaleOffset})`,
     };
     }
   };
@@ -99,14 +98,12 @@ function AnimateItems({
         <motion.div
           key={index}
           className={classNameItem}
-          style={getInitialVariant()}
+          // style={getInitialVariant()}
           variants={{
             hidden: getInitialVariant(),
             show: {
               opacity: 1,
-              scale: 1,
-              translateX: 0,
-              translateY: 0,
+              transform: 'translateX(0) translateY(0) scale(1)',
             },
           }}
           transition={{
diff --git a/src/photo/index.ts b/src/photo/index.ts
index cb29212f..ebd0815c 100644
--- a/src/photo/index.ts
+++ b/src/photo/index.ts
@@ -177,12 +177,16 @@ export const photoQuantityText = (photos: Photo[]) =>
 
 export const descriptionForPhotoSet = (
   photos:Photo[],
-  descriptor: string,
+  descriptor?: string,
   dateBased?: boolean,
 ) =>
   dateBased
     ? dateRangeForPhotos(photos).description.toUpperCase()
-    : `${photos.length} ${descriptor} ${labelForPhotos(photos)}`;
+    : [
+      photos.length,
+      descriptor,
+      labelForPhotos(photos),
+    ].join(' ');
 
 export const dateRangeForPhotos = (photos: Photo[]) => {
   const start = photos[0].takenAtNaiveFormattedShort;