diff --git a/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx b/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
index 55814a74b..0de03b216 100644
--- a/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
+++ b/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
@@ -70,7 +70,16 @@ const ImageEditorOverlay = (props: IProps) => {
const height = img.height * scale;
canvasRef.current.width = width;
canvasRef.current.height = height;
+ canvasRef.current.style.transition = 'width 0.5s, height 0.5s';
+ canvasRef.current.style.width = `${width}px`;
+ canvasRef.current.style.height = `${height}px`;
+ // Apply CSS transition to animate the resizing
+
ctx?.drawImage(img, 0, 0, width, height);
+
+ setTimeout(() => {
+ canvasRef.current.style.transition = 'none';
+ }, 500); // Adjust the time to match your animation duration
};
};
@@ -204,6 +213,14 @@ const ImageEditorOverlay = (props: IProps) => {
}}
label={'Original'}
/>
+ }
+ onClick={() => {
+ cropCanvas(1, 1);
+ }}
+ label={'Square (1:1)'}
+ />