Update the SubDown Logic

Signed-off-by: Mohd Faraz <[email protected]>

src/components/SubDown.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router";
 import { HashLink } from "react-router-hash-link";
 import DownArrow from "../Assets/down-arrow.svg"
@@ -8,17 +8,21 @@ const SubDown = (props) => {
     const [first, update] = useState(true);
     const style = {
         width: "75%",
-        transform: !first ? 'rotate(180deg)' : '', 
-        transition: 'transform 500ms ease', // smooth transition
+        animation: "rotation linear",
+        animationTimeline: "scroll()"
        }
+    useEffect(()=> {
+        window.addEventListener('scroll', () => 
+        console.log(window.scrollY, window.innerHeight)
+        )
+    }, [])
     return (
         <HashLink
             scroll={(el) => el.scrollIntoView({ behavior: "auto" })}
             to={props.id}
             onClick={
                 () =>{
                     if (!first) {
-
                         nav(-1);
                     }
                     update(!first)

src/style.css

@@ -831,3 +831,9 @@ button:focus {
 .fork-btn-inner::after {
   display: none !important;
 }
+
+@keyframes rotation {
+  to {
+    transform: rotate(180deg);
+  }
+}