Merge branch 'main' of ssh://gitlab.igem.org/2024/bielefeld-cebitec

.gitignore

@@ -11,4 +11,5 @@ app.py
 unused.py
 unused-css-master
 
-other
\ No newline at end of file
+other
+src/components/resources

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",
@@ -25,6 +26,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/App/App.css

@@ -53,6 +53,30 @@
   display: none;
 }
 
+.col-max{
+  flex: 0 0 0%;
+  width: max-content !important; 
+  min-width: 77% !important; 
+  max-width: 90% !important;
+}
+
+.col-2{
+  width:16.66666667% !important;
+}
+
+.col-1{
+  width: 8.33333333% !important;
+}
+
+.col-max-10{
+  flex: 0 0 auto;
+  max-width: 83.33333333% !important;
+}
+
+.col{
+  max-width: 100% !important;
+}
+
 
 /* * * * * * * */
 /* * * BODY* * */
@@ -460,6 +484,10 @@ svg {
   max-width: 100%;
   display: block;
 }
+
+.s-svg{
+  max-width: 80%;
+}
 img .middle{
   vertical-align:middle;
 }

src/App/App.tsx

 import React, { useEffect } from "react";
 import "./App.css";
-import "../contents/example.css";
+import '../components/test.css'
+import "../contents/example.css"
 import "./App.scss";
 import 'beautiful-react-diagrams/styles.css';
 import "bootstrap/dist/css/bootstrap.min.css";

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/seclarations.ts

@@ -34,3 +34,5 @@ interface Datawrapper {
   dependencyPromises?: any;
 }
 
+
+

src/components/test.css

+
+  
+  .ball01 {
+    fill: red;
+  }
+  
+  .ball02 {
+    fill: blue;
+  }
+  
+  .ball03 {
+    fill: green;
+  }
+  
+  .line {
+    stroke: black;
+  }
+  
+  .theLine {
+    visibility: hidden;
+  }
+  
+  .theLine2 {
+    visibility: hidden;
+  }
+  
+  .theLine3 {
+    visibility: hidden;
+  }
+  
+  .vector {
+    height: 100px;
+    width: 100px;
+    background-color: white;
+  }
+  
+  #payload {
+    height: 100px;
+    width: 100px;
+    float: left;
+  }
+  
+  .firstSpacingBlock {
+    background-color: violet;
+    height: 50vh;
+    text-align: center;
+  }
+  
+  .secondSpacingBlock {
+    margin-bottom: 160%;
+  }
+  
+  #firstCircle {
+    background-color: yellow;
+    border-radius: 50%;
+    height: 100px;
+    width: 100px;
+    border: 2px solid blue;
+  }
+  
+  
+  #secondCircle {
+    background-color: blue;
+    border-radius: 50%;
+    height: 100px;
+    width: 100px;
+    border: 2px solid yellow;
+    margin-bottom: 10%;
+  }
+  
+  #thirdCircle {
+    background-color: black;
+    border-radius: 50%;
+    height: 100px;
+    width: 100px;
+    border: 2px solid yellow;
+    margin-bottom: 80%;
+  }
\ No newline at end of file

src/components/testsvganimation.tsx

+import gsap from "gsap"; 
+import { useGSAP } from "@gsap/react";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+import { useRef } from 'react';
+import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";
+
+
+
+function TestSVG() {
+  gsap.registerPlugin(useGSAP);
+  gsap.registerPlugin(MotionPathPlugin);
+  gsap.registerPlugin(ScrollTrigger);
+  
+console.log("Started 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 middle",
+        end: "bottom middle"
+      }
+    })
+    
+    .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)
+    console.log(main)
+  },
+  );
+
+ 
+  return (
+    <div className="col-8">
+      
+      <svg id="svg" xmlns="" viewBox="0 0 1980 4400">
+        
+        <path className="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" strokeWidth="10px"></path>
+
+        
+
+        <path className="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" strokeWidth="10px"></path>
+
+
+
+        <path className="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" strokeWidth="10px"></path>
+
+      </svg>
+      <img ref={vectorRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-capsule.svg" alt="vectorImg"/>
+      <img ref={payloadRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-inhaler.svg" alt="payloadImg"/>
+      <img ref={inhalatorRef} src="https://static.igem.wiki/teams/5247/scientific-figures/albuterol.svg" alt="inhalatorImg"/>
+    </div>
+  );
+}
+
+export default TestSVG;
+

src/contents/example.tsx

 import { TimelineItem } from "../components/My-Timeline";
 import SimpleSlider from "../components/slider";
-
+import TestSVG from "../components/testsvganimation";
 
 
 export function Example() {
     return (
       <>
+      <div className="col">
         <div className="col">
+        <TestSVG></TestSVG>
             <h3 className="example">Exercises</h3>
             <i><h6>By Your name</h6></i>
             <div className="example-exercise">
@@ -57,6 +59,7 @@ export function Example() {
                 date='How to SynBio'
                 tag='Workshop Session I.'
                 color='var(--text-primary)'
+                csstag="Workshop"
                 >
                 Design genetic constructs and re-write the genomic code, and plan experiments using AI. Learn how to effectively build genetic circuit systems for implementation in your iGEM project.
                 </TimelineItem>
@@ -183,6 +186,7 @@ export function Example() {
 
         
 
+        </div>
       </>
     );
   }

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">

src/vite-env.d.ts

@@ -10,4 +10,6 @@ interface ImportMetaEnv {
     readonly env: ImportMetaEnv;
   }
 
-  
\ No newline at end of file
+  declare module "gsap/all.js" {
+    export default any;
+  }
\ No newline at end of file

tsconfig.json

@@ -20,7 +20,7 @@
       "noUnusedParameters": true,
       "noFallthroughCasesInSwitch": true
     },
-    "include": ["src", "code/mapsc.ts", "assets/mapscript.js", "pubpub/mapscript.js"]
+    "include": ["src", "code/mapsc.ts", "assets/mapscript.js", "pubpub/mapscript.js", "pubpub/extra_modules"]
   }
   
   
\ No newline at end of file