{ "id": "gsap-9cdf33cfed38", "sourceId": "gsap", "title": "Timeline clear and rebuild", "sourceUrl": "https://demos.gsap.com/demo/timeline-clear-and-rebuild", "demoUrl": "https://codepen.io/GreenSock/pen/raMQBVQ", "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-9cdf33cfed38", "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-9cdf33cfed38" }, "sourceInputs": [ { "kind": "authored-study-specification", "localPath": "artifacts/full-import/gsap/remaining-docs/study-specs.json", "sha256": "cbb89331eda8783b5cf2f173b326b9195eeabfb223374fb60019161d9f46d4a6", "bytes": 52279, "recordId": "gsap-9cdf33cfed38" }, { "kind": "official-catalog-metadata", "localPath": "artifacts/full-import/gsap/remaining-docs/catalog-evidence.json", "sha256": "4f2a4f9aa64456b85b905b562b60d7733629b41026787b3057cba29e8b10de69", "bytes": 30117, "recordId": "gsap-9cdf33cfed38" }, { "kind": "official-documentation-evidence", "localPath": "artifacts/full-import/gsap/remaining-docs/official-documentation-evidence.json", "sha256": "bfa25f561e61c597569cf1bc0b3538e6dce4b9985a932775ceab41e665ca24a2", "bytes": 11430, "recordIds": [ "clear", "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-tween-factories", "startLine": 1485, "endLine": 1500, "rangeSha256": "1251980901f535c2dbb380797cb25af2b5e4053a35ce2b0fda6e2d578e1e6687" }, { "id": "timeline-clear", "startLine": 1916, "endLine": 1928, "rangeSha256": "2662312757fa2566e7a3fe8e71221c7494046f438c8a3139e08ee6feac860286" }, { "id": "tween-factories", "startLine": 2637, "endLine": 2657, "rangeSha256": "23ae9d51865c9b7966bbc3b6cdbdb560fc790ff19e3b8bb524a3493fbf60c58a" } ] } ], "studiedPrinciple": "Reuse a timeline object but clear and rebuild its child animations for distinct entry and exit, choosing explicit entrance starts and current-value exits.", "namedApis": [ { "name": "timeline.pause().clear()", "purpose": "Stop the owned timeline and remove its children before rebuilding a route.", "libraryEvidence": [ "timeline-clear", "direction-controls" ], "documentationEvidence": [ "clear" ] }, { "name": "timeline.fromTo() for entry; timeline.to() for exit", "purpose": "Use declared entry start values and capture current rendered values for exit.", "libraryEvidence": [ "timeline-tween-factories", "tween-factories" ], "documentationEvidence": [ "tween" ] }, { "name": "timeline.play(0)", "purpose": "Run the new child sequence from its start on the same timeline instance.", "libraryEvidence": [ "direction-controls" ], "documentationEvidence": [ "tween" ] } ], "implementationBrief": { "scene": "A newly authored menu toggle, three panels, three short menu labels, and a two-bar icon. Show which route is currently built and how many child tweens the owned timeline contains.", "controls": [ { "label": "Open / Close", "type": "button", "action": "Pause and clear the same timeline, build the requested route, then play from zero." }, { "label": "Open then close quickly", "type": "button", "action": "Trigger one declared short-delay stress sequence to demonstrate exit from current values." }, { "label": "Reset", "type": "button", "action": "Cancel the stress timer, pause and clear the timeline, and explicitly restore closed styles." } ], "mechanismSteps": [ "Construct exactly one owned paused timeline and keep it for the study lifetime. Clear removes child tweens and labels; it does not itself revert target styles.", "On an open request, call pause().clear(), then add fromTo entry tweens with explicit authored hidden positions, item opacity, and icon geometry; play from zero.", "On a close request, call pause().clear(), then add to tweens so the new exit begins from currently rendered values, including an interrupted entrance.", "For this study, opening during an unfinished exit deliberately resets to the declared entrance start because fromTo supplies that start. Disclose this behavior instead of promising seamless reversal.", "After exit completion mark content closed and return focus if needed. Keep state callbacks from an old route from updating a rebuilt route by using a build-generation guard.", "Stress controls must cancel any prior scheduled action before queuing a new one. Reset restores styles explicitly and does not rely on clear as a visual reset." ] }, "authoredDefaults": { "panelCount": 3, "entranceDurationSeconds": 0.55, "entranceStaggerSeconds": 0.06, "entryFromXPercent": -110, "exitDurationSeconds": 0.4, "exitYPercent": 150, "exitRotationsDegrees": [ -10, 12, -6 ], "stressCloseDelaySeconds": 0.15, "reopenDuringExit": "declared reset to the explicit entrance start" }, "verificationRequired": [ "Repeated toggles reuse the same timeline object while child count stays bounded instead of growing with every request.", "Closing at 0.15 seconds begins the exit from the current rendered entry values.", "Opening during exit follows the disclosed fromTo reset policy; no claim of continuous reversal is made.", "Reset removes scheduled stress actions, restores styles, and prevents stale completion callbacks from changing the new state.", "Keyboard and reduced-motion paths leave the menu understandable and focus reachable." ], "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.", "Original panel counts, random rotation values, layout, timings, and icon construction were not recovered. The fixed study rotations differ from the described random exit.", "clear() removes animation children; it does not restore CSS values or automatically cancel unrelated timers." ], "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 }