GSAP Motion Path / Parallax Animation

// components/GSAP_MotionPath.tsx
import { useRef, useEffect } from "react";
import gsap from "gsap";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
gsap.registerPlugin(MotionPathPlugin);

export const GSAP_MotionPath = () => {
  const ballRef = useRef<HTMLDivElement | null>(null);
  useEffect(()=> {
    const tl = gsap.to(ballRef.current, {
      duration: 3,
      motionPath: {
        path: "#myPath",
        align: "#myPath",
        autoRotate: true,
        alignOrigin: [0.5, 0.5]
      },
      ease: "power1.inOut",
      repeat: -1,
      yoyo: true
    });
    return ()=> tl.kill();
  },[]);
  return (
    <div className="relative w-full h-[200px] flex justify-center items-center bg-white rounded-xl shadow-lg">
      <svg width="400" height="140">
        <path id="myPath" d="M10,80 C120,10 280,150 390,80" fill="none" stroke="#ccc" strokeWidth="2"/>
      </svg>
      <div ref={ballRef} className="w-8 h-8 rounded-full bg-red-500 absolute"/>
    </div>
  );
};

• MotionPathPlugin: Lets elements follow any SVG path smoothly.
• align + autoRotate: Keeps the object oriented along the curve.
• repeat & yoyo: Creates an infinite forward-backward motion.
• ease: Adds natural acceleration/deceleration.