installed gsap

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
+    "@gsap/react": "^2.1.1",
     "@mui/icons-material": "^5.16.5",
     "@mui/lab": "^5.0.0-alpha.171",
     "@mui/material": "^5.16.5",
@@ -24,6 +25,7 @@
     "dangerously-set-html-content": "^1.1.0",
     "dompurify": "^3.1.5",
     "framer-motion": "^11.2.13",
+    "gsap": "^3.12.5",
     "markmap": "^0.6.1",
     "markmap-common": "^0.17.0",
     "markmap-lib": "^0.17.0",

src/components/HorizontalTimeline.tsx

@@ -206,7 +206,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
         {
           title: "" ,
           pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-          tag:  "Ethics",
+          tag:  "Academia",
           author: "Nicole Friedlein",
           tabid: "InvFriedlein",
           text: "Text",

src/components/testsvganimation.tsx

+
+import './App.css';
+import vectorImg from "./resources/vector.png"
+import payloadImg from "./resources/payload.png"
+import inhalatorImg from "./resources/inhalator.png"
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { useGSAP } from '@gsap/react';
+import { useRef } from 'react';
+import { MotionPathPlugin } from 'gsap/all';
+
+function TestSVG() {
+
+  const vectorRef = useRef(null);
+  const payloadRef = useRef(null);
+  const inhalatorRef = useRef(null);
+
+  useGSAP(
+    () => {
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.registerPlugin(useGSAP);
+    gsap.registerPlugin(MotionPathPlugin);
+    
+    gsap.defaults({ease: "none"});
+
+    const main = gsap.timeline({
+      scrollTrigger: {
+        trigger: "svg",
+        scrub: true,
+        start:"top center",
+        end: "bottom center"
+      }
+    })
+    .from(".theLine", {drawSVG: 0}, 0)
+    .to(payloadRef.current, {motionPath:{
+      path:".theLine",
+      align:".theLine",
+      alignOrigin:[0.5, 0.5],
+    }}, 0)
+    .from(".theLine2", {drawSVG: 0}, 0)
+    .to(vectorRef.current, {motionPath:{
+      path:".theLine2",
+      align:".theLine2",
+      alignOrigin:[0.5, 0.5],
+    }}, 0).from(".theLine3", {drawSVG: 0}, 0)
+    .to(inhalatorRef.current, {motionPath:{
+      path:".theLine3",
+      align:".theLine3",
+      alignOrigin:[0.5, 0.5],
+    }}, 0)
+  },
+  );
+
+  
+  return (
+    <div className="App">
+      <div className="firstSpacingBlock">
+        <h1>iGem Header</h1>
+        <p>Scroll for animation</p>
+      </div>
+      
+      <svg id="svg" xmlns="" viewBox="0 0 1980 4400">
+        
+        <path class="theLine" d="
+        M 50 50 S 540 200 540 1000 S -300 1200 540 2000 S -600 2200 540 3000 S 0 4000 540 4000 L 540 4500"
+        file="none" stroke="white" stroke-width="10px"></path>
+
+        
+
+        <path class="theLine2" d="
+        M 1030 50 S 540 200 540 1000 S -300 1200 540 2000 S -600 2200 540 3000 S 540 4000 540 4000 L 540 3500"
+        file="none" stroke="white" stroke-width="10px"></path>
+
+
+
+        <path class="theLine3" d="
+        M 2000 600 S -300 1200 540 2000 S -600 2200 540 3000 S 540 4000 -100 4000 L -100 4200"
+        file="none" stroke="white" stroke-width="10px"></path>
+
+      </svg>
+      <img ref={vectorRef} src={vectorImg} alt="vectorImg"/>
+      <img ref={payloadRef} src={payloadImg} alt="payloadImg"/>
+      <img ref={inhalatorRef} src={inhalatorImg} alt="inhalatorImg"/>
+    </div>
+  );
+}
+
+export default TestSVG;
\ No newline at end of file

src/contents/human-practices.tsx

@@ -390,11 +390,6 @@ let timelinepersontabs =[
                 Parent
             </div>
             </div>
-            <div className="col-1">
-            <div className="t-tag Activist">
-                Activist
-            </div>
-            </div>
             <div className="col">Original language: English</div>
             </div>
             <div className="row">