Optimize core animations

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 { Camera } from '.';
-import { descriptionForCameraPhotos } from './meta';
+import { descriptionForCameraPhotos, titleForCamera } from './meta';
 
 export type OGLoadingState = 'unloaded' | 'loading' | 'loaded' | 'failed';
 

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,

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,
+      transform: `translateY(${distanceOffset}px) scale(${scaleOffset})`,
-      translateY: distanceOffset,
     };
     }
   };
@@ -99,14 +98,12 @@ function AnimateItems({
         <motion.div
           key={index}
           className={classNameItem}
-          style={getInitialVariant()}
+          // style={getInitialVariant()}
           variants={{
             hidden: getInitialVariant(),
             show: {
               opacity: 1,
-              scale: 1,
+              transform: 'translateX(0) translateY(0) scale(1)',
-              translateX: 0,
-              translateY: 0,
             },
           }}
           transition={{

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;