From 065a22b651810e5751e62ad48ba84f9779a9bd58 Mon Sep 17 00:00:00 2001
From: M-Farmaha <115003821+M-Farmaha@users.noreply.github.com>
Date: Mon, 12 Feb 2024 16:36:31 +0200
Subject: [PATCH] about fix

---
 src/components/AboutSection/AboutItem.jsx     | 22 ++++++-------------
 .../AboutSection/AboutSection-styled.jsx      | 17 ++++++++++----
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/components/AboutSection/AboutItem.jsx b/src/components/AboutSection/AboutItem.jsx
index 334fead..fcc9ca6 100644
--- a/src/components/AboutSection/AboutItem.jsx
+++ b/src/components/AboutSection/AboutItem.jsx
@@ -1,6 +1,4 @@
 import { useEffect, useState } from "react";
-// import { useSpring, a } from "@react-spring/web";
-
 import { AboutIconSvg, Item, SubTitle, TitleH3 } from "./AboutSection-styled";
 import sprite from "../../sprite.svg";
 
@@ -10,10 +8,6 @@ export const AboutItem = ({ item, index }) => {
 
   const even = index % 2 === 0;
 
-//   const { transform } = useSpring({
-//     transform: isVisible ? "translateX(0%)" : even ? "translateX(-100%)" : "translateX(100%)",
-//   });
-
   useEffect(() => {
     const handleScroll = () => {
       const element = document.getElementById(id);
@@ -33,15 +27,13 @@ export const AboutItem = ({ item, index }) => {
 
   return (
     <>
-      {/* <a.div style={{transform}}> */}
-        <Item id={id} isVisible={isVisible} even={even}>
-          <AboutIconSvg>
-            <use href={sprite + icon}></use>
-          </AboutIconSvg>
-          <TitleH3>{title}</TitleH3>
-          <SubTitle>{text}</SubTitle>
-        </Item>
-      {/* </a.div> */}
+      <Item id={id} isVisible={isVisible} even={even}>
+        <AboutIconSvg>
+          <use href={sprite + icon}></use>
+        </AboutIconSvg>
+        <TitleH3>{title}</TitleH3>
+        <SubTitle>{text}</SubTitle>
+      </Item>
     </>
   );
 };
diff --git a/src/components/AboutSection/AboutSection-styled.jsx b/src/components/AboutSection/AboutSection-styled.jsx
index 68ab270..7e58666 100644
--- a/src/components/AboutSection/AboutSection-styled.jsx
+++ b/src/components/AboutSection/AboutSection-styled.jsx
@@ -1,8 +1,17 @@
 import styled, { keyframes } from "styled-components";
 
-const show = keyframes`
+const showFromLeft = keyframes`
   0% {
-    transform: translate(-200%);
+    transform: translate(-100%);
+  }
+  100% {
+    transform: translate(0%);
+  }
+`;
+
+const showFromRight = keyframes`
+  0% {
+    transform: translate(100%);
   }
   100% {
     transform: translate(0%);
@@ -37,8 +46,8 @@ export const Item = styled.li`
   flex-grow: 1;
   text-align: center;
 
-  transform: translate(-200%);
-  animation-name: ${(props) => (props.isVisible ? show : null)};
+  transform: ${(props) => (props.even ? "translate(-100%)" : "translate(100%)")};
+  animation-name: ${(props) => (props.isVisible ? (props.even ? showFromLeft : showFromRight) : null)};
   animation-duration: 1s;
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;