HomeAnimation.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";
import vectorImg from "https://static.igem.wiki/teams/5247/placeholders/vector.webp";

export function HomeAnim() {
  gsap.registerPlugin(useGSAP);
  gsap.registerPlugin(MotionPathPlugin);
  gsap.registerPlugin(ScrollTrigger);
  
  const vectorRef = 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(".homeAnimLine", {drawSVG: 0}, 0)
    .to(vectorRef.current, {motionPath:{
      path:".homeAnimLine",
      align:".homeAnimLine",
      alignOrigin:[0.5, 0.5],
    }}, 0)
    
    
    console.log(main)
  },
  );

 
  return (
    <div className="row col">
      <svg id="svg" viewBox="0 0 1200 4000">
        <path 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 ref={vectorRef} src={vectorImg} alt="vectorImg"/>
    </div>
  );
}