about fix

M-Farmaha · Feb 12, 2024 · 065a22b · 065a22b
1 parent f1c07a6
commit 065a22b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git 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
@@ -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;