add smooth fade effect on scroll in skills progress bars

src/containers/skillProgress/Progress.scss

@@ -18,6 +18,9 @@
   background-color: $progressBarSpanBG;
   position: relative;
   overflow: hidden;
+  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
+  width: 0;
+  opacity: 0;
 }
 .skill {
   line-height: 3.5vw;

src/containers/skillProgress/skillProgress.js

@@ -1,30 +1,54 @@
-import React from "react";
+import React, {useRef, useEffect, useState} from "react";
 import "./Progress.scss";
 import {illustration, techStack} from "../../portfolio";
 import {Fade} from "react-reveal";
 import Build from "../../assets/lottie/build";
 import DisplayLottie from "../../components/displayLottie/DisplayLottie";
 
+function useInView(options) {
+  const ref = useRef();
+  const [inView, setInView] = useState(false);
+
+  useEffect(() => {
+    const observer = new window.IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setInView(true);
+        observer.disconnect();
+      }
+    }, options);
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [options]);
+
+  return [ref, inView];
+}
+
+function SkillBar({exp}) {
+  const [ref, inView] = useInView({threshold: 0.3});
+  const progressStyle = {
+    width: inView ? exp.progressPercentage : 0,
+    opacity: inView ? 1 : 0
+  };
+  return (
+    <div className="skill">
+      <p>{exp.Stack}</p>
+      <div className="meter" ref={ref}>
+        <span style={progressStyle}></span>
+      </div>
+    </div>
+  );
+}
+
 export default function StackProgress() {
   if (techStack.viewSkillBars) {
     return (
       <Fade bottom duration={1000} distance="20px">
         <div className="skills-container">
           <div className="skills-bar">
             <h1 className="skills-heading">Proficiency</h1>
-            {techStack.experience.map((exp, i) => {
-              const progressStyle = {
-                width: exp.progressPercentage
-              };
-              return (
-                <div key={i} className="skill">
-                  <p>{exp.Stack}</p>
-                  <div className="meter">
-                    <span style={progressStyle}></span>
-                  </div>
-                </div>
-              );
-            })}
+            {techStack.experience.map((exp, i) => (
+              <SkillBar exp={exp} key={i} />
+            ))}
           </div>
 
           <div className="skills-image">