SVG Animation

import { DrawSVGPlugin, MorphSVGPlugin, MotionPathPlugin } from "gsap/all";
gsap.registerPlugin(DrawSVGPlugin, MorphSVGPlugin, MotionPathPlugin);

interface DrawSVGVars {
  drawSVG?: string | boolean | number;  // Drawing configuration
}

// DrawSVG values:
// true - Draw from 0% to 100%
// false - Hide drawing (0% to 0%)  
// "50%" - Draw first 50%
// "25% 75%" - Draw from 25% to 75% of path
// "100% 0%" - Draw in reverse

// Draw path from start to end
gsap.to(".path", { 
  duration: 2, 
  drawSVG: true,
  ease: "none" 
});

// Draw specific segment
gsap.to(".path", { 
  duration: 1, 
  drawSVG: "20% 80%" 
});

// Animate drawing position
gsap.fromTo(".line", 
  { drawSVG: "0% 0%" },      // Start with no drawing
  { drawSVG: "0% 100%", duration: 3 }  // Draw from start to end
);

// Reveal and hide sequence
const tl = gsap.timeline();
tl.fromTo(".signature", 
    { drawSVG: "50% 50%" },    // Start from middle
    { drawSVG: "0% 100%", duration: 2 }
  )
  .to(".signature", 
    { drawSVG: "100% 100%", duration: 1 }, "+=1"
  );

interface MorphSVGVars {
  morphSVG?: string | SVGPathElement | object;  // Target path to morph to
}

/**
 * Convert shapes to paths for morphing compatibility
 * @param targets - SVG shapes to convert
 * @returns Converted path elements
 */
MorphSVGPlugin.convertToPath(targets: string | Element | Element[]): Element[];

/**
 * Convert path data to Bezier point data
 * @param path - SVG path or path data string
 * @param vars - Configuration options
 * @returns Array of Bezier point objects
 */
MorphSVGPlugin.pathDataToBezier(path: string | SVGPathElement, vars?: object): object[];

// Basic path morphing
gsap.to("#path1", {
  duration: 2,
  morphSVG: "#path2",    // Morph to another path
  ease: "power2.inOut"
});

// Morph with path data string
gsap.to(".shape", {
  duration: 1.5,
  morphSVG: "M0,0 L100,100 L200,0 Z"  // Direct path data
});

// Convert shapes to paths first
MorphSVGPlugin.convertToPath("circle, rect, ellipse");
gsap.to("#circle", {
  duration: 2,
  morphSVG: "#rect"
});

// Complex morphing sequence
const tl = gsap.timeline();
tl.to(".morph-path", { morphSVG: ".shape1", duration: 1 })
  .to(".morph-path", { morphSVG: ".shape2", duration: 1 })
  .to(".morph-path", { morphSVG: ".shape3", duration: 1 });

interface MotionPathVars {
  motionPath?: {
    path: string | SVGPathElement;      // Path to follow
    start?: number;                     // Starting position (0-1)
    end?: number;                       // Ending position (0-1)
    autoRotate?: boolean | number;      // Auto-rotate to follow path direction
    alignOrigin?: [number, number];     // Transform origin alignment
    offsetX?: number;                   // X offset from path
    offsetY?: number;                   // Y offset from path
  };
}

/**
 * Convert coordinates between different coordinate systems
 * @param target - Element to convert coordinates for
 * @param path - Reference path
 * @param pointA - Starting point
 * @param pointB - Ending point (optional)
 * @returns Converted coordinates
 */
MotionPathPlugin.convertCoordinates(
  target: Element, 
  path: SVGPathElement, 
  pointA: object, 
  pointB?: object
): object;

/**
 * Get position and rotation data at specific point on path
 * @param path - SVG path element or path data
 * @param progress - Position along path (0-1)
 * @param includeAngle - Include rotation angle in result
 * @returns Position and rotation data
 */
MotionPathPlugin.getPositionOnPath(
  path: string | SVGPathElement, 
  progress: number, 
  includeAngle?: boolean
): { x: number; y: number; angle?: number };

// Basic motion path
gsap.to(".airplane", {
  duration: 5,
  motionPath: {
    path: "#flight-path",
    autoRotate: true
  },
  ease: "none"
});

// Partial path with offset
gsap.to(".car", {
  duration: 3,
  motionPath: {
    path: "#road",
    start: 0.2,        // Start 20% along path
    end: 0.8,          // End at 80% along path
    offsetY: -20,      // Offset 20px above path
    autoRotate: true
  }
});

// Multiple elements on same path
gsap.to([".follower1", ".follower2", ".follower3"], {
  duration: 4,
  motionPath: {
    path: "#track",
    autoRotate: 90     // Add 90 degree rotation offset
  },
  stagger: 0.5,        // Stagger start times
  ease: "none"
});

// Get specific position on path
const pathData = MotionPathPlugin.getPositionOnPath("#path", 0.5, true);
gsap.set(".marker", { 
  x: pathData.x, 
  y: pathData.y, 
  rotation: pathData.angle 
});

interface SVGTransformVars {
  // SVG-specific transform origin
  svgOrigin?: string;           // "x y" in SVG coordinate system
  transformOrigin?: string;     // CSS transform origin
  
  // Smooth origin transitions
  smoothOrigin?: boolean;       // Smooth transform origin changes
  
  // SVG coordinate system
  xPercent?: number;           // Percentage of element width
  yPercent?: number;           // Percentage of element height
}

// SVG transform origin
gsap.to(".svg-element", {
  duration: 2,
  rotation: 360,
  svgOrigin: "50 50",      // Center in SVG coordinates
  transformOrigin: "center center"
});

// Smooth origin changes during animation
gsap.to(".shape", {
  duration: 3,
  rotation: 180,
  smoothOrigin: true,
  svgOrigin: "100 100"     // Animate origin to bottom-right
});

interface SVGAttributeVars {
  // Path attributes
  d?: string;                   // Path data
  
  // Shape attributes  
  r?: number;                   // Circle/ellipse radius
  rx?: number;                  // Rectangle/ellipse x-radius
  ry?: number;                  // Rectangle/ellipse y-radius
  cx?: number;                  // Circle/ellipse center x
  cy?: number;                  // Circle/ellipse center y
  x?: number;                   // Rectangle x position
  y?: number;                   // Rectangle y position
  width?: number;               // Rectangle width
  height?: number;              // Rectangle height
  
  // Line attributes
  x1?: number; y1?: number;     // Line start point
  x2?: number; y2?: number;     // Line end point
  
  // Style attributes
  fill?: string;                // Fill color
  stroke?: string;              // Stroke color
  strokeWidth?: number;         // Stroke width
  strokeDasharray?: string;     // Dash pattern
  strokeDashoffset?: number;    // Dash offset
  opacity?: number;             // Element opacity
  fillOpacity?: number;         // Fill opacity
  strokeOpacity?: number;       // Stroke opacity
}

// Animate shape attributes
gsap.to("circle", {
  duration: 2,
  r: 50,              // Radius
  cx: 200,            // Center x
  cy: 150,            // Center y
  fill: "red",        // Fill color
  strokeWidth: 5      // Stroke width
});

// Rectangle morphing
gsap.to("rect", {
  duration: 1.5,
  width: 200,
  height: 100,
  rx: 20,             // Rounded corners
  x: 100,
  y: 50
});

// Line animation
gsap.to("line", {
  duration: 2,
  x2: 300,            // End point x
  y2: 200,            // End point y
  strokeWidth: 10,
  stroke: "blue"
});

// Animated logo reveal
const logoTimeline = gsap.timeline();

// Draw paths in sequence
logoTimeline
  .fromTo(".logo-path-1", 
    { drawSVG: "0% 0%" },
    { drawSVG: "0% 100%", duration: 1 }
  )
  .fromTo(".logo-path-2", 
    { drawSVG: "50% 50%" },
    { drawSVG: "0% 100%", duration: 1.5 }, "-=0.5"
  )
  .to(".logo-fill", { 
    opacity: 1, 
    duration: 0.5 
  });

// Morphing icon states
const iconMorph = gsap.timeline({ paused: true });
iconMorph
  .to(".menu-icon", { 
    morphSVG: ".close-icon", 
    duration: 0.3 
  })
  .to(".menu-icon", { 
    rotation: 180, 
    duration: 0.3 
  }, 0);

// Motion path with drawing
gsap.set(".trail", { drawSVG: "0% 0%" });
gsap.to(".moving-object", {
  duration: 4,
  motionPath: {
    path: "#path",
    autoRotate: true
  },
  ease: "none",
  onUpdate: function() {
    // Draw trail as object moves
    gsap.set(".trail", { 
      drawSVG: `0% ${this.progress() * 100}%` 
    });
  }
});