From 8d98b84213d6827ec7dacbf59a7e8422ef157f4f Mon Sep 17 00:00:00 2001
From: Mark Mankarious <mz.mankarious@gmail.com>
Date: Tue, 31 Oct 2023 10:29:12 +0000
Subject: [PATCH] fix: disables animations on scene layer on first render

---
 src/components/SceneLayer/SceneLayer.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/SceneLayer/SceneLayer.tsx b/src/components/SceneLayer/SceneLayer.tsx
index ab85ba0..1f8b292 100644
--- a/src/components/SceneLayer/SceneLayer.tsx
+++ b/src/components/SceneLayer/SceneLayer.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import gsap from 'gsap';
 import { Box, SxProps } from '@mui/material';
 import { useUiStateStore } from 'src/stores/uiStateStore';
@@ -16,6 +16,7 @@ export const SceneLayer = ({
   sx,
   disableAnimation
 }: Props) => {
+  const [isFirstRender, setIsFirstRender] = useState(true);
   const elementRef = useRef<HTMLDivElement>(null);
 
   const scroll = useUiStateStore((state) => {
@@ -29,12 +30,16 @@ export const SceneLayer = ({
     if (!elementRef.current) return;
 
     gsap.to(elementRef.current, {
-      duration: disableAnimation ? 0 : 0.25,
+      duration: disableAnimation || isFirstRender ? 0 : 0.25,
       translateX: scroll.position.x,
       translateY: scroll.position.y,
       scale: zoom
     });
-  }, [zoom, scroll, disableAnimation]);
+
+    if (isFirstRender) {
+      setIsFirstRender(false);
+    }
+  }, [zoom, scroll, disableAnimation, isFirstRender]);
 
   return (
     <Box