{
  "name": "scaleOnScroll",
  "version": "1.0.0",
  "purpose": "The element scales in proportion to scroll progress (GSAP ScrollTrigger scrub).",
  "output": "js",
  "engine": "gsap.ScrollTrigger",
  "paramSchema": {
    "fromScale": {
      "type": "number",
      "default": 0.8,
      "min": 0.2,
      "max": 1
    },
    "toScale": {
      "type": "number",
      "default": 1,
      "min": 0.5,
      "max": 2
    },
    "transformOrigin": {
      "type": "string",
      "default": "center center",
      "pattern": "^[a-zA-Z0-9% ]{2,40}$"
    },
    "scrub": {
      "type": "number",
      "default": 1,
      "min": 0,
      "max": 4
    }
  },
  "triggerDefaults": {
    "start": "top bottom",
    "end": "center center"
  },
  "performance": {
    "verified": true,
    "lcpSafe": true,
    "cost": 2,
    "verifiedAt": "2026-06-12"
  },
  "a11y": {
    "reducedMotionFallback": "instant-visible"
  },
  "template": "gsap.fromTo({{target}}, { scale: {{params.fromScale}}, transformOrigin: {{params.transformOrigin}} }, { scale: {{params.toScale}}, transformOrigin: {{params.transformOrigin}}, ease: \"none\", scrollTrigger: { trigger: {{target}}, start: {{trigger.start}}, end: {{trigger.end}}, scrub: {{params.scrub}} } });",
  "demo": {
    "html": "<div class=\"d-scaleOnScroll\" style=\"width:200px;height:200px;background:#6366f1;border-radius:12px;margin:60vh auto;\">Scale me</div>",
    "params": {
      "fromScale": 0.6,
      "toScale": 1,
      "transformOrigin": "center center",
      "scrub": 1.5
    }
  }
}