{
  "id": "gsap-6ec2aaf96f9c",
  "sourceId": "gsap",
  "title": "Animate auto height",
  "sourceUrl": "https://demos.gsap.com/demo/animate-auto-height",
  "demoUrl": "https://codepen.io/GreenSock/pen/QwjNwpo",
  "sourceStatus": "unresolved",
  "sourceReason": "Public page unavailable through web browsing",
  "sourceRevision": null,
  "sourceLicense": null,
  "originalDemoAcquired": false,
  "disposition": "ready_for_independent_study",
  "evidenceBasis": "topic_only_catalog_title_plus_independently_verified_official_api",
  "studyId": "gsap-6ec2aaf96f9c",
  "sharedStudyCanonicalId": null,
  "label": "Independently authored documentation study; original Pen unavailable",
  "catalogEvidence": {
    "localPath": "artifacts/full-import/gsap/remaining-docs/catalog-evidence.json",
    "sha256": "4f2a4f9aa64456b85b905b562b60d7733629b41026787b3057cba29e8b10de69",
    "bytes": 30117,
    "recordId": "gsap-6ec2aaf96f9c"
  },
  "sourceInputs": [
    {
      "kind": "authored-study-specification",
      "localPath": "artifacts/full-import/gsap/remaining-docs/study-specs.json",
      "sha256": "cbb89331eda8783b5cf2f173b326b9195eeabfb223374fb60019161d9f46d4a6",
      "bytes": 52279,
      "recordId": "gsap-6ec2aaf96f9c"
    },
    {
      "kind": "official-catalog-metadata",
      "localPath": "artifacts/full-import/gsap/remaining-docs/catalog-evidence.json",
      "sha256": "4f2a4f9aa64456b85b905b562b60d7733629b41026787b3057cba29e8b10de69",
      "bytes": 30117,
      "recordId": "gsap-6ec2aaf96f9c"
    },
    {
      "kind": "official-documentation-evidence",
      "localPath": "artifacts/full-import/gsap/remaining-docs/official-documentation-evidence.json",
      "sha256": "bfa25f561e61c597569cf1bc0b3538e6dce4b9985a932775ceab41e665ca24a2",
      "bytes": 11430,
      "recordIds": [
        "css",
        "tween"
      ]
    },
    {
      "kind": "original-library-source",
      "localPath": "artifacts/full-import/gsap/library/src/CSSPlugin.js",
      "sha256": "8e141f02d26f00f0d3259aa480e3eddff55ad25e0363272321b883602af1f824",
      "gitBlob": "5f459a1fd9cbb34dfffa659e1175c431e7e1e62f",
      "revision": "13e2b790546426a1a2e0e9b409f3f8dc6d6611f2",
      "sourcePath": "src/CSSPlugin.js",
      "ranges": [
        {
          "id": "css-auto-height",
          "startLine": 282,
          "endLine": 299,
          "rangeSha256": "6976cf434584cf7d3f110865c9bb9531bde44e3d50280a062e58e6e2db5dc9a1"
        },
        {
          "id": "css-auto-endpoint",
          "startLine": 320,
          "endLine": 331,
          "rangeSha256": "7258a65b4723cc0802229b223945a42c0803a98c31159a493083f650983cbbcd"
        }
      ]
    },
    {
      "kind": "original-library-source",
      "localPath": "artifacts/full-import/gsap/library/src/gsap-core.js",
      "sha256": "8063816e0e7c3e6c07970fb06feafb06146fd266db5d8346419176b3d496e284",
      "gitBlob": "c673b9e2e0ee04832afb13cb892ae75f503e268c",
      "revision": "13e2b790546426a1a2e0e9b409f3f8dc6d6611f2",
      "sourcePath": "src/gsap-core.js",
      "ranges": [
        {
          "id": "overwrite-all",
          "startLine": 2403,
          "endLine": 2411,
          "rangeSha256": "3033b90f012d6d87330a8fca1b6ca3006c831d80930d99e3a8a16d360a32bba7"
        },
        {
          "id": "tween-factories",
          "startLine": 2637,
          "endLine": 2657,
          "rangeSha256": "23ae9d51865c9b7966bbc3b6cdbdb560fc790ff19e3b8bb524a3493fbf60c58a"
        }
      ]
    }
  ],
  "studiedPrinciple": "Animate a content wrapper between zero and its intrinsic height using CSSPlugin's auto endpoint measurement. The text-expansion button and its interaction contract are newly authored.",
  "namedApis": [
    {
      "name": "gsap.to(wrapper, {height: 'auto'})",
      "purpose": "Measure the intrinsic endpoint and interpolate from the current computed height.",
      "libraryEvidence": [
        "css-auto-height",
        "css-auto-endpoint",
        "tween-factories"
      ],
      "documentationEvidence": [
        "css"
      ]
    },
    {
      "name": "gsap.to(wrapper, {height: 0, overwrite: true})",
      "purpose": "Collapse from the current value and replace the previous height tween.",
      "libraryEvidence": [
        "css-auto-height",
        "overwrite-all"
      ],
      "documentationEvidence": [
        "tween"
      ]
    }
  ],
  "implementationBrief": {
    "scene": "One native button followed by a clipped wrapper containing independently written, noninteractive explanatory text. Put padding on an inner element so height zero does not retain outer padding.",
    "controls": [
      {
        "label": "Expand / Collapse",
        "type": "button",
        "action": "In animated mode toggle desiredOpen, update aria-expanded, and animate toward auto or zero. In static/reduced-motion mode disable this button, keep desiredOpen and aria-expanded true, and label the visible state Expanded."
      },
      {
        "label": "Short / Long text",
        "type": "select",
        "action": "Replace the inner paragraph with an authored short or long variant. If open, settle height to auto after cancelling the old tween so the changed content is readable."
      },
      {
        "label": "Static view",
        "type": "toggle",
        "action": "Show all text with natural height, stop motion, set desiredOpen and aria-expanded true, and disable the collapse button. Leaving static mode keeps the paragraph open and re-enables collapse; it does not collapse automatically."
      }
    ],
    "mechanismSteps": [
      "Leave text visible in base HTML/CSS. Only initialize a closed height of zero after JavaScript has loaded and animated mode is enabled.",
      "Use a desiredOpen boolean and one owned tween reference. Each button click replaces the old tween, then uses height:'auto' or height:0 with overwrite:true.",
      "On successful opening completion explicitly retain height:auto. Guard completion with the current desired state so an interrupted tween cannot overwrite a newer request.",
      "Keep the inner content in layout while measuring. Do not apply display:none to it before computing the opening endpoint.",
      "If width or content changes during an opening transition, cancel the old measured transition and settle to the requested endpoint. This resize policy is an authored choice.",
      "In static mode or reduced motion expose the entire paragraph with no fixed height, desiredOpen=true, and aria-expanded=true. Disable the Expand/Collapse button while content is permanently exposed. Base no-JavaScript markup uses the same expanded, disabled state.",
      "Leaving static mode keeps the open natural-height state and re-enables the Collapse action. Only the initial non-reduced-motion JavaScript initialization uses the authored collapsed starting state."
    ]
  },
  "authoredDefaults": {
    "durationSeconds": 0.4,
    "ease": "power2.inOut",
    "initialAnimatedState": "collapsed",
    "shortTextLength": "one new sentence",
    "longTextLength": "three new paragraphs",
    "assets": "system font and original text only"
  },
  "verificationRequired": [
    "At open completion the wrapper has natural height and all text is visible; at closed completion its content box height is zero.",
    "Rapid expand-collapse-expand ends in the last requested state without an old completion callback changing the height.",
    "Switch long text and resize from 1440px to 320px while opening; no lasting clipped text remains after settling.",
    "Keyboard activation updates aria-expanded. Static, reduced-motion, and no-JavaScript states expose text with aria-expanded=true and the collapse button disabled; returning to animated mode keeps content open until the next action."
  ],
  "unsupportedClaims": [
    "Original composition, assets, timing, breakpoint behavior, and live interaction are not observable in captured frames. This brief does not establish visual fidelity or recover original code.",
    "The catalog has an empty description, body, tags, and API links. Its title selects the study topic only; no original accordion, text content, trigger, layout, duration, or reverse behavior was observed.",
    "An auto endpoint is measured for a tween; this is not a guarantee of continuously tracking content changes during that tween."
  ],
  "dependencies": {
    "package": "gsap",
    "version": "3.15.0",
    "revision": "13e2b790546426a1a2e0e9b409f3f8dc6d6611f2",
    "repository": "https://github.com/greensock/GSAP",
    "plugins": [],
    "registration": "Core includes CSSPlugin; no separate plugin registration required.",
    "runtimeCandidates": [
      {
        "path": "dist/gsap.js",
        "localPath": "artifacts/full-import/gsap/library/dist/gsap.js",
        "gitBlob": "ec5ffee3f099bc454f2f1c79cee6a55ba97e7400",
        "sha256": "01effe0e121c22ba0f885a3f091f3dc6d1f0d445c4fba37dcb298e314eca5cfb",
        "bytes": 179557
      }
    ],
    "license": {
      "name": "GSAP Standard 'No Charge' License (custom, not MIT)",
      "localPath": "artifacts/full-import/gsap/licenses/gsap-standard-license.html",
      "sha256": "bf8536e67b77db780f7db0c14a645f184f554bb19e938d1e52d58986e2f10528",
      "bytes": 6988,
      "url": "https://gsap.com/community/standard-license/"
    },
    "originalDependencyVersionKnown": false
  },
  "runtimeVerified": false,
  "implementationWritten": false
}