Home.tsx

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openFromOtherPage } from "../utils/openFromOtherpAge";
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";
import { H2 } from "../components/Headings";

export function Home() {
  const location = useLocation();

    useEffect(() => {
        const params = new URLSearchParams(location.search);
        const collapseId = params.get('collapseId');
        const tabId = params.get('tab');

        // Scroll to the section specified by collapseId
        if (collapseId) {
            const collapseElement = document.getElementById(collapseId);
            if (collapseElement) {
                const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
                const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
                const scrollPosition = elementTop - offset;

                window.scrollTo({
                    top: scrollPosition,
                    behavior: 'smooth',
                });
            }
        }

        // Open the tab specified by tabId
        if (tabId) {
            openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
        }
    }, [location.search]);

    gsap.registerPlugin(ScrollTrigger);
  gsap.registerPlugin(useGSAP);
  gsap.registerPlugin(MotionPathPlugin);

  const vectorRef = useRef(null);
  
  useGSAP(
    () => {
    gsap.registerPlugin(ScrollTrigger);
    gsap.registerPlugin(useGSAP);
    gsap.registerPlugin(MotionPathPlugin);
    gsap.defaults({ease: "none"});
    
    gsap.defaults({ease: "none"});

    const main = gsap.timeline({
      scrollTrigger: {
        trigger: "animStarterClass",
        scrub: true,
        start:"top middle",
        end: "bottom middle"
      }
    })
    .from(".homeAnimLine", {drawSVG: 0}, 0)
    .to(vectorRef.current, {motionPath:{
      path:".homeAnimLine",
      align:".homeAnimLine",
      alignOrigin:[0.5, 0.5],
    }}, 0)
    
    
    console.log(main)
  },
  );

  return (
    <>
      <div className="animStarterClass">
        <div className="row col">
          <H2 text="iGEM Bielefeld-CeBiTec 2024"/>
        </div>
        <div className="row col">
          <svg id="svg" viewBox="0 0 2000 2500">
            <path className="homeAnimLine"  d="
            M 50 50 
            C 500 -50 1000 100 1870 50 
            C 1820 220 2024 528 1870 590 
            C 1351 678 118 451 54 561 
            C 3 672 12 985 55 985 
            C 586 1090 1342 898 1881 1038 
            C 1994 1194 1986 1568 1890 1681 
            C 1751 1803 281 1481 168 1646 
            C 81 1794 21 1977 168 2142 
            C 499 2246 1403 2325 1081 2142"/>
          </svg>
          <img className="vector" ref={vectorRef} src={"https://static.igem.wiki/teams/5247/placeholders/vector.webp"} alt="vectorImg"/>
        </div>
      </div>
    </>
  );
}