Keyframes

{
  "id": "gsap-fd69f1564d6e",
  "sourceId": "gsap",
  "title": "Keyframes",
  "sourceUrl": "https://demos.gsap.com/demo/keyframes",
  "demoUrl": "https://codepen.io/GreenSock/pen/mdMYrBM",
  "sourceStatus": "unresolved",
  "sourceReason": "Public page unavailable through web browsing",
  "sourceRevision": null,
  "sourceLicense": null,
  "originalDemoAcquired": false,
  "disposition": "ready_for_independent_study",
  "evidenceBasis": "catalog_explanation_and_linked_api",
  "studyId": "gsap-fd69f1564d6e",
  "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-fd69f1564d6e"
  },
  "sourceInputs": [
    {
      "kind": "authored-study-specification",
      "localPath": "artifacts/full-import/gsap/remaining-docs/study-specs.json",
      "sha256": "cbb89331eda8783b5cf2f173b326b9195eeabfb223374fb60019161d9f46d4a6",
      "bytes": 52279,
      "recordId": "gsap-fd69f1564d6e"
    },
    {
      "kind": "official-catalog-metadata",
      "localPath": "artifacts/full-import/gsap/remaining-docs/catalog-evidence.json",
      "sha256": "4f2a4f9aa64456b85b905b562b60d7733629b41026787b3057cba29e8b10de69",
      "bytes": 30117,
      "recordId": "gsap-fd69f1564d6e"
    },
    {
      "kind": "official-documentation-evidence",
      "localPath": "artifacts/full-import/gsap/remaining-docs/official-documentation-evidence.json",
      "sha256": "bfa25f561e61c597569cf1bc0b3538e6dce4b9985a932775ceab41e665ca24a2",
      "bytes": 11430,
      "recordIds": [
        "keyframes",
        "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": "keyframe-sequence",
          "startLine": 2372,
          "endLine": 2400,
          "rangeSha256": "497cf7eb83906db82ce09e4987b7ffe094e5760292539d673dff4d3fa653f553"
        },
        {
          "id": "tween-factories",
          "startLine": 2637,
          "endLine": 2657,
          "rangeSha256": "23ae9d51865c9b7966bbc3b6cdbdb560fc790ff19e3b8bb524a3493fbf60c58a"
        }
      ]
    }
  ],
  "studiedPrinciple": "Express a sequence of movements on one target as an array of keyframe vars with explicit step durations.",
  "namedApis": [
    {
      "name": "gsap.to(target, {keyframes: [step1, step2, step3]})",
      "purpose": "Create sequential per-step to tweens inside one keyframe animation.",
      "libraryEvidence": [
        "keyframe-sequence",
        "tween-factories"
      ],
      "documentationEvidence": [
        "keyframes",
        "tween"
      ]
    },
    {
      "name": "tween.play(), tween.pause(), tween.restart()",
      "purpose": "Control the created sequence without rebuilding on each play press.",
      "libraryEvidence": [
        "direction-controls"
      ],
      "documentationEvidence": [
        "tween"
      ]
    }
  ],
  "implementationBrief": {
    "scene": "One authored square in a bounded stage, with three labeled destination markers and a readable display of the study's keyframe array.",
    "controls": [
      {
        "label": "Play / Pause",
        "type": "button",
        "action": "Control the existing keyframe tween."
      },
      {
        "label": "Restart",
        "type": "button",
        "action": "Return to the declared initial state and play the same sequence."
      },
      {
        "label": "Progress",
        "type": "range",
        "action": "Pause and seek through normalized progress to inspect step boundaries."
      }
    ],
    "mechanismSteps": [
      "Set the target's initial x, y, rotation, and scale explicitly once; record those values separately from keyframe destinations.",
      "Create a paused gsap.to with a keyframes array. Each step contains destination properties, duration, and ease; array order defines the sequence.",
      "Use cumulative step durations to label the current segment. Do not infer segment number by multiplying progress by the number of steps when durations differ.",
      "Restart from the initial state and expose the exact newly authored array as study code.",
      "If the stage must shrink, rebuild its authored coordinate plan at a stable paused state and identify that responsive choice as study behavior."
    ]
  },
  "authoredDefaults": {
    "initial": {
      "x": 0,
      "y": 0,
      "rotation": 0,
      "scale": 1
    },
    "keyframeSteps": [
      {
        "x": 120,
        "y": 0,
        "duration": 0.6,
        "ease": "power1.inOut"
      },
      {
        "x": 120,
        "y": 80,
        "rotation": 90,
        "duration": 0.4,
        "ease": "power1.inOut"
      },
      {
        "x": 0,
        "y": 0,
        "rotation": 180,
        "duration": 0.8,
        "ease": "power1.inOut"
      }
    ],
    "targetSizePixels": 28
  },
  "verificationRequired": [
    "The target visits the declared destinations in array order and total duration equals the sum of step durations.",
    "Progress jumps to 0, the first boundary, the second boundary, and 1 produce the expected coordinates.",
    "Pause and restart remain repeatable without accumulating duplicate tweens.",
    "All markers and the static step list remain readable at 320px."
  ],
  "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 official description recommends keyframes but provides no original path, step values, duration, or marker layout. The numeric sequence is newly authored."
  ],
  "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-fd69f1564d6e"
  },
  {
    "kind": "official-catalog-metadata",
    "localPath": "artifacts/full-import/gsap/remaining-docs/catalog-evidence.json",
    "sha256": "4f2a4f9aa64456b85b905b562b60d7733629b41026787b3057cba29e8b10de69",
    "bytes": 30117,
    "recordId": "gsap-fd69f1564d6e"
  },
  {
    "kind": "official-documentation-evidence",
    "localPath": "artifacts/full-import/gsap/remaining-docs/official-documentation-evidence.json",
    "sha256": "bfa25f561e61c597569cf1bc0b3538e6dce4b9985a932775ceab41e665ca24a2",
    "bytes": 11430,
    "recordIds": [
      "keyframes",
      "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": "keyframe-sequence",
        "startLine": 2372,
        "endLine": 2400,
        "rangeSha256": "497cf7eb83906db82ce09e4987b7ffe094e5760292539d673dff4d3fa653f553"
      },
      {
        "id": "tween-factories",
        "startLine": 2637,
        "endLine": 2657,
        "rangeSha256": "23ae9d51865c9b7966bbc3b6cdbdb560fc790ff19e3b8bb524a3493fbf60c58a"
      }
    ]
  }
]