feat: disables scroll / zoom animations on drag and drop layer

src/components/SceneLayer/SceneLayer.tsx

@@ -7,9 +7,15 @@ interface Props {
   children?: React.ReactNode;
   order?: number;
   sx?: SxProps;
+  disableAnimation?: boolean;
 }
 
-export const SceneLayer = ({ children, order = 0, sx }: Props) => {
+export const SceneLayer = ({
+  children,
+  order = 0,
+  sx,
+  disableAnimation
+}: Props) => {
   const elementRef = useRef<HTMLDivElement>(null);
 
   const scroll = useUiStateStore((state) => {
@@ -23,12 +29,12 @@ export const SceneLayer = ({ children, order = 0, sx }: Props) => {
     if (!elementRef.current) return;
 
     gsap.to(elementRef.current, {
-      duration: 0.25,
+      duration: disableAnimation ? 0 : 0.25,
       translateX: scroll.position.x,
       translateY: scroll.position.y,
       scale: zoom
     });
-  }, [zoom, scroll]);
+  }, [zoom, scroll, disableAnimation]);
 
   return (
     <Box

src/components/UiOverlay/UiOverlay.tsx

@@ -190,10 +190,12 @@ export const UiOverlay = () => {
             sx={{
               position: 'absolute',
               width: 350,
+              transform: 'translateY(-100%)'
+            }}
+            style={{
               maxWidth: `calc(${rendererSize.width} - ${appPadding.x * 2}px)`,
               left: appPadding.x,
-              top: rendererSize.height - appPadding.y * 2 - spacing(1),
-              transform: 'translateY(-100%)'
+              top: rendererSize.height - appPadding.y * 2 - spacing(1)
             }}
           >
             <DebugUtils />
@@ -202,7 +204,7 @@ export const UiOverlay = () => {
       </Box>
 
       {mode.type === 'PLACE_ICON' && mode.id && (
-        <SceneLayer>
+        <SceneLayer disableAnimation>
           <DragAndDrop iconId={mode.id} tile={mouse.position.tile} />
         </SceneLayer>
       )}