animated Pipi in exercise3 using transition

src/pages/Exercise3.tsx

@@ -1,6 +1,7 @@
-import { FC, useState, useEffect } from 'react';
+import { FC, useState, useEffect,useRef } from 'react';
 import '../styles/Exercise3.scss';
 import Pipi from '../../public/Pipi.svg';
+import PipiPointRight from '../../public/PipiPointRight.svg';
 import AppWrapper from '../components/AppWrapper';
 import Box from '../components/Box';
 import Grid from '../components/Grid';
@@ -40,14 +41,18 @@ const question = [
 ];
 
 const Exercise3: FC = () => {
+  const [enableTransition, setEnableTransition] = useState(false)
+  const [animatedPipi, setAnimatedPipi] = useState(Pipi)
   const [confetti, setConfetti] = useState(false);
   const [leftOffset, setLeftOffset] = useState(0);
   const [topOffset, setTopOffset] = useState(0);
-
+  
   const [clickedCorrectAddress, setClickedCorrectAddress] = useState(false);
   const [clickedIncorrectAddress, setClickedIncorrectAddress] = useState(false);
   const [selectionMade, setSelectionMade] = useState(false);
 
+  const timeForTransition = useRef(false);
+
   const nums = Array.from({ length: 24 }, (_, index) => index + 1);
   const itemSpace = [1, 3, 1, 3, 2, 4, 2, 1, 1, 2, 1, 2, 1];
 
@@ -63,12 +68,33 @@ const Exercise3: FC = () => {
     window.addEventListener('resize', fixPipiPosition);
   }, []);
 
+  useEffect(() => {
+    if (enableTransition){
+    setTimeout(() => {
+      setAnimatedPipi(PipiPointRight);
+      setConfetti(true);
+    }, 1500);
+  }
+}, [enableTransition])
+
+
+
   const handleCorrectAddressClick = () => {
     setClickedCorrectAddress(true);
     setClickedIncorrectAddress(false);
     setConfetti(true);
     setSelectionMade(true);
-  };
+    const addressWidth = 40; // Replace with actual width if different
+    const newLeftOffset = addressWidth * (9- 1) + leftOffset;
+    setLeftOffset(newLeftOffset);
+    timeForTransition.current=true;
+    }
+
+    useEffect(() => {
+      if (timeForTransition.current) {
+          setEnableTransition(true); 
+      }
+  }, [leftOffset]); // Depend on `state1` to trigger this effect
 
   const handleIncorrectAddressClick = () => {
     setClickedIncorrectAddress(true);
@@ -133,13 +159,14 @@ const Exercise3: FC = () => {
                 <Box letter="m" num={3} conf={false}></Box>
               </Grid>
             </div>
-            <img
+             <img
               className="exercise3-pipi"
-              src={Pipi}
+              src={animatedPipi}
               alt="Pipi"
               style={{
                 left: leftOffset,
                 top: topOffset,
+                transition: clickedCorrectAddress?  'left 1.3s' :'none',
               }}
             />
           </div>

src/styles/Exercise3.scss

@@ -7,7 +7,8 @@
 
 .exercise3-pipi {
   position: absolute;
-  z-index: 2;
+  z-index: 3;
+
 }
 
 .exercise3-box {