added scroll to view when step is evpanded

src/pages/interviewRounds/Steps.tsx

@@ -14,6 +14,7 @@ interface Props {
 }
 
 const Steps: React.FC<Props> = (props) => {
+
     return (
         <IonItem lines='none' onClick={() => props.setDescription(props.stepNumber)}>
             {props.showDescription ? <StepsDescription

src/pages/interviewRounds/StepsDescreption.module.scss

@@ -6,8 +6,10 @@
     justify-content: space-between;
     width: 100vw;
     background-color: white;
-    transition-delay: 20s;
-    transition-property: height;
+
+    animation: fadeInAnimation ease-in 0.5s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
 
     .header {
         display: flex;
@@ -20,7 +22,7 @@
             align-items: center;
             flex-direction: column;
             width: 18rem;
-            margin-left: 5.3rem;
+            margin-left: 14.5vw;
             .step {
                 color: #A3A3A3;
                 font-size: 1.4rem;
@@ -43,6 +45,13 @@
     }
 }
 
+// .fadeIn {
+//     transition-delay: 20s;
+//     transition-property: height;
+//     transition: opacity 0.5s;
+//     opacity: 1;
+// }
+
 ion-icon {
     color: var(--primary-button-color);
     width: 1.5rem;
@@ -53,4 +62,13 @@ ion-button {
     width: 32.8rem;
     height: 4rem;
     font-weight: 400;
+}
+
+@keyframes fadeInAnimation {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }

src/pages/interviewRounds/StepsDescreption.tsx

@@ -3,6 +3,7 @@ import img from '../../assets/icons/skill_Information.svg';
 
 import { IonButton, IonIcon } from '@ionic/react';
 import { lockOpen, lockClosed } from 'ionicons/icons'
+import { useEffect, useRef } from 'react';
 
 interface Props {
     stepNumber: number;
@@ -13,8 +14,18 @@ interface Props {
 }
 
 const StepsDescription: React.FC<Props> = (props) => {
+
+    const itemRef = useRef<null | HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (itemRef && itemRef.current) {
+
+            itemRef.current.scrollIntoView();
+        }
+    }, [props.stepNumber]);
+
     return (
-        <div className={styles.stepDescription}>
+        <div className={styles.stepDescription} ref={itemRef}>
             <div className={styles.header}>
                 <IonIcon icon={props.isUnlocked ? lockOpen : lockClosed} color={props.isUnlocked ? '' : "dark"} ></IonIcon>