Interruptible Single Timeline Enter/Exit

{
  "id": "gsap-f6be61ceefd2",
  "sourceId": "gsap",
  "title": "Interruptible Single Timeline Enter/Exit",
  "sourceUrl": "https://demos.gsap.com/demo/interruptible-single-timeline-enterexit",
  "demoUrl": "https://codepen.io/GreenSock/pen/qEaKJZr",
  "sourceStatus": "unresolved",
  "sourceReason": "Embedded public source payload not found in returned page",
  "sourceRevision": null,
  "sourceLicense": null,
  "originalDemoAcquired": false,
  "disposition": "ready_for_independent_study",
  "evidenceBasis": "catalog_explanation_and_linked_api",
  "studyId": "gsap-f6be61ceefd2",
  "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-f6be61ceefd2"
  },
  "sourceInputs": [
    {
      "kind": "authored-study-specification",
      "localPath": "artifacts/full-import/gsap/remaining-docs/study-specs.json",
      "sha256": "cbb89331eda8783b5cf2f173b326b9195eeabfb223374fb60019161d9f46d4a6",
      "bytes": 52279,
      "recordId": "gsap-f6be61ceefd2"
    },
    {
      "kind": "official-catalog-metadata",
      "localPath": "artifacts/full-import/gsap/remaining-docs/catalog-evidence.json",
      "sha256": "4f2a4f9aa64456b85b905b562b60d7733629b41026787b3057cba29e8b10de69",
      "bytes": 30117,
      "recordId": "gsap-f6be61ceefd2"
    },
    {
      "kind": "official-documentation-evidence",
      "localPath": "artifacts/full-import/gsap/remaining-docs/official-documentation-evidence.json",
      "sha256": "bfa25f561e61c597569cf1bc0b3538e6dce4b9985a932775ceab41e665ca24a2",
      "bytes": 11430,
      "recordIds": [
        "add-pause",
        "tween"
      ]
    },
    {
      "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": "direction-controls",
          "startLine": 1354,
          "endLine": 1391,
          "rangeSha256": "8e2f36127b2fc568686d2d934ad3b74a21274c78bf1045d210e376260598819f"
        },
        {
          "id": "timeline-pause",
          "startLine": 1785,
          "endLine": 1790,
          "rangeSha256": "6ccdb8b5fc2f0b6b507fe2864dcb4c552193e913f247377ca4f606fbe4714ebe"
        },
        {
          "id": "reverse-ease",
          "startLine": 2114,
          "endLine": 2136,
          "rangeSha256": "a94b1617e88c0c3328ce1d2038eaa0d44a03612cf5b33cbfeac7140245698555"
        }
      ]
    }
  ],
  "studiedPrinciple": "Use one timeline with an open-state pause so closing during entry reverses entry, while closing from the held-open state proceeds into a separately authored forward exit.",
  "namedApis": [
    {
      "name": "gsap.timeline().addPause('open', callback)",
      "purpose": "Separate the entrance and distinct exit in a single reusable timeline.",
      "libraryEvidence": [
        "timeline-pause"
      ],
      "documentationEvidence": [
        "add-pause"
      ]
    },
    {
      "name": "timeline.play(), timeline.reverse(), timeline.pause()",
      "purpose": "Route interaction according to whether the entrance is unfinished or the timeline is held at open.",
      "libraryEvidence": [
        "direction-controls"
      ],
      "documentationEvidence": [
        "add-pause"
      ]
    },
    {
      "name": "easeReverse: 'power3.in' on entrance tweens",
      "purpose": "Give reverse entrance motion a different response from the forward back.out entrance.",
      "libraryEvidence": [
        "reverse-ease"
      ],
      "documentationEvidence": [
        "tween"
      ],
      "minimumVersion": "3.15.0"
    }
  ],
  "implementationBrief": {
    "scene": "A native menu toggle and three independently styled panels containing short new labels. Show the current phase as closed, entering, held open, reversing entry, or exiting.",
    "controls": [
      {
        "label": "Open / Close",
        "type": "button",
        "action": "Change desiredOpen and route play/reverse using the phase contract below."
      },
      {
        "label": "Slow motion",
        "type": "checkbox",
        "action": "Use a lower absolute playback speed so the two closing routes can be inspected."
      },
      {
        "label": "Reset",
        "type": "button",
        "action": "Pause at zero with callbacks suppressed and restore all authored closed values."
      }
    ],
    "mechanismSteps": [
      "Build one paused timeline: explicit entrance fromTo tweens, then label open and addPause at the end of entrance, then separate to tweens that move panels downward with authored rotations.",
      "Opening from closed plays from zero. Before reaching the open pause, a close request calls reverse(); onReverseComplete marks closed.",
      "The pause callback marks held open. Closing from this held state calls play() from the same playhead so the timeline proceeds into the distinct exit instead of reversing entry.",
      "During reversing entry, a new open request calls play() from the current position. Do not create another timeline or reset the panel position.",
      "Choose an explicit authored rule for an open request during the distinct exit: queue it, finish the exit, restore the base closed state, then play from zero once. Show queued open in the phase display.",
      "After the forward exit completes, reset the same timeline to zero without firing state callbacks, restore closed styles, and honor the queued desired state. Ensure callback updates do not create recursion.",
      "Set easeReverse on the entrance child tweens, not only on the timeline object. The source description names back.out forward and power3.in reverse; all durations and geometry remain authored."
    ]
  },
  "authoredDefaults": {
    "panelCount": 3,
    "entranceDurationSeconds": 0.6,
    "entranceStaggerSeconds": 0.06,
    "entranceFromXPercent": -110,
    "entranceEase": "back.out(1.4)",
    "entranceReverseEase": "power3.in",
    "exitDurationSeconds": 0.45,
    "exitYPercent": 150,
    "exitRotationsDegrees": [
      -12,
      9,
      14
    ],
    "reopenDuringExit": "queue one reopen after exit completes"
  },
  "verificationRequired": [
    "Closing at 25% of entrance reverses that entrance rather than running the separate exit.",
    "Closing after the open pause runs the distinct downward/rotating exit.",
    "Reopening during reverse entry continues from the current position without a jump.",
    "Reopening during the distinct exit follows the declared queue policy and cannot leave multiple timelines running.",
    "Reset and reduced motion produce a readable stable menu state; keyboard focus never remains inside hidden content."
  ],
  "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 source description establishes the two closing routes and named eases, but original timing, panel count, geometry, and controls were not recovered.",
    "The exit rotations here are declared fixed study values; the original description's random distribution is not reproduced.",
    "The queue policy for reopening during exit is authored because that behavior is not described."
  ],
  "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
}

[
  {
    "kind": "authored-study-specification",
    "localPath": "artifacts/full-import/gsap/remaining-docs/study-specs.json",
    "sha256": "cbb89331eda8783b5cf2f173b326b9195eeabfb223374fb60019161d9f46d4a6",
    "bytes": 52279,
    "recordId": "gsap-f6be61ceefd2"
  },
  {
    "kind": "official-catalog-metadata",
    "localPath": "artifacts/full-import/gsap/remaining-docs/catalog-evidence.json",
    "sha256": "4f2a4f9aa64456b85b905b562b60d7733629b41026787b3057cba29e8b10de69",
    "bytes": 30117,
    "recordId": "gsap-f6be61ceefd2"
  },
  {
    "kind": "official-documentation-evidence",
    "localPath": "artifacts/full-import/gsap/remaining-docs/official-documentation-evidence.json",
    "sha256": "bfa25f561e61c597569cf1bc0b3538e6dce4b9985a932775ceab41e665ca24a2",
    "bytes": 11430,
    "recordIds": [
      "add-pause",
      "tween"
    ]
  },
  {
    "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": "direction-controls",
        "startLine": 1354,
        "endLine": 1391,
        "rangeSha256": "8e2f36127b2fc568686d2d934ad3b74a21274c78bf1045d210e376260598819f"
      },
      {
        "id": "timeline-pause",
        "startLine": 1785,
        "endLine": 1790,
        "rangeSha256": "6ccdb8b5fc2f0b6b507fe2864dcb4c552193e913f247377ca4f606fbe4714ebe"
      },
      {
        "id": "reverse-ease",
        "startLine": 2114,
        "endLine": 2136,
        "rangeSha256": "a94b1617e88c0c3328ce1d2038eaa0d44a03612cf5b33cbfeac7140245698555"
      }
    ]
  }
]