GSAP 사례 연구
Timeline clear and rebuild
탐색 · MIT (local companion); GSAP Standard No Charge License (runtime)
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
저장한 HTML에서는 갤러리의 재생 설정이 적용되지 않아요.
SOURCE FILES
독립 예제 코드 읽기
사례의 구도나 문서의 원리를 바탕으로 새로 만든 예제입니다. 아래 코드를 복사해 직접 응용할 수 있습니다. 실행 HTML에는 미리보기를 위한 실행 환경이 들어 있습니다.
vendor/gsap-previews/sources/gsap-9cdf33cfed38/study-brief.json실행 안내·자료
{
"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
}
vendor/gsap-previews/sources/gsap-9cdf33cfed38/source-inputs.json실행 안내·자료
[
{
"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"
}
]
}
]
함께 쓰는 파일 4개 보기
vendor/gsap-previews/sources/gsap-9cdf33cfed38/index.html실행 안내·자료
<main class="study"><p class="study-label">공식 API 기반 · 독립 예제</p><header><h2>같은 타임라인, 새로 만든 경로</h2><p>clear는 자식을 지웁니다. 표현 값을 복원하는 일과 예약 입력 취소는 별도로 처리합니다.</p></header><div class="stage menu-stage"><div class="menu-panels"><div class="menu-panel"><svg viewBox="0 0 120 120" aria-hidden="true"><path d="m60 7 15 31 34 5-25 24 6 34-30-16-30 16 6-34L11 43l34-5Z" fill="currentColor"/></svg><span class="menu-label">Explore</span></div><div class="menu-panel"><svg viewBox="0 0 120 120" aria-hidden="true"><path d="m60 7 15 31 34 5-25 24 6 34-30-16-30 16 6-34L11 43l34-5Z" fill="currentColor"/></svg><span class="menu-label">Collect</span></div><div class="menu-panel"><svg viewBox="0 0 120 120" aria-hidden="true"><path d="m60 7 15 31 34 5-25 24 6 34-30-16-30 16 6-34L11 43l34-5Z" fill="currentColor"/></svg><span class="menu-label">Create</span></div></div></div><div class="controls"><button id="toggle" type="button"><span class="icon-bars" aria-hidden="true"><span></span><span></span></span><span id="toggle-label">닫기</span></button><button id="stress" type="button">빠른 열기 → 닫기</button><button id="reset" type="button">초기화</button><label><input id="static-mode" type="checkbox">정적 보기</label></div><p class="readout" id="reading" aria-live="off"></p><p class="endpoint-note">퇴장 중 다시 열기는 정해 둔 등장 시작점으로 돌아갑니다. 매끄러운 역재생을 주장하는 예제가 아닙니다.</p></main>vendor/gsap-previews/sources/gsap-9cdf33cfed38/style.css실행 안내·자료
*{box-sizing:border-box}body{background:#111522;color:#f5f2eb;font-family:system-ui,sans-serif;margin:0}button{font:inherit}.study{margin:0 auto;max-width:1100px;min-height:100vh;padding:clamp(20px,4vw,42px)}.study-label{color:#95efd2;font-size:12px;letter-spacing:.08em;margin:0 0 24px}header h2{font-size:clamp(24px,4vw,40px);letter-spacing:-.04em;margin:0 0 12px}header p{color:#aeb7c9;line-height:1.6;margin:0 0 24px;max-width:62ch}.controls{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}button{background:#26314b;border:1px solid #617394;border-radius:9px;color:#f5f2eb;cursor:pointer;padding:9px 14px}button:hover{background:#334261}button:focus-visible{outline:3px solid #95efd2;outline-offset:3px}button:disabled{cursor:default;opacity:.45}.stage{align-items:center;background:radial-gradient(ellipse at top,#243253,#141c2d);border:1px solid #3d4c68;border-radius:20px;display:flex;justify-content:center;min-height:220px;overflow:hidden;position:relative}.note{color:#aeb7c9;font-size:13px;line-height:1.5}.readout{color:#95efd2;font-family:ui-monospace,monospace;font-size:13px;min-height:2em}.stage svg{display:block;max-width:100%}code{font-family:ui-monospace,monospace}button[aria-pressed="true"]{background:#95efd2;color:#111522}
.study{padding:18px;max-width:960px}.study-label{margin-bottom:10px}header h2{font-size:clamp(22px,4vw,32px);margin-bottom:8px}header p{font-size:14px;margin-bottom:16px}.controls{align-items:center;gap:9px;margin:14px 0}.controls label{align-items:center;color:#cbd4e3;display:flex;flex-wrap:wrap;font-size:13px;gap:7px}.controls input[type=range]{accent-color:#95efd2;max-width:145px}.controls select{background:#26314b;border:1px solid #617394;border-radius:7px;color:#f5f2eb;font:inherit;padding:6px}.stage{min-height:180px}.readout{line-height:1.5;margin:8px 0}.small-code{background:#172036;border:1px solid #354258;border-radius:10px;color:#c3d1e7;font-size:12px;line-height:1.5;max-height:180px;overflow:auto;padding:12px;white-space:pre-wrap;word-break:break-word}.pair{display:flex;gap:12px;justify-content:center}.pair figure{flex:1;margin:0;max-width:300px;min-width:0;padding:8px}.pair figcaption{color:#aeb7c9;font-family:ui-monospace,monospace;font-size:12px;margin-bottom:6px;text-align:center}.pair svg{display:block;max-height:210px;width:100%}.tile-art{align-items:center;border-radius:14px;color:#152039;display:flex;justify-content:center}.tile-art svg{height:65%;width:65%}.menu-stage{min-height:196px;padding:18px}.menu-panels{display:flex;gap:10px;max-width:570px;width:100%}.menu-panel{align-items:center;background:linear-gradient(135deg,#95efd2,#75d8ed);border-radius:14px;color:#142137;display:flex;flex:1;flex-direction:column;font-weight:650;gap:10px;justify-content:center;min-height:135px;min-width:0;padding:12px}.menu-panel:nth-child(2){background:linear-gradient(135deg,#fbadce,#897dff)}.menu-panel:nth-child(3){background:linear-gradient(135deg,#ffd28c,#fc7f8e)}.menu-panel svg{height:58px;width:58px}.icon-bars{display:inline-flex;flex-direction:column;gap:5px;margin-right:7px;vertical-align:middle}.icon-bars span{background:currentColor;display:block;height:2px;width:17px}.endpoint-note{color:#aeb7c9;font-size:12px;line-height:1.5}button[hidden],[hidden]{display:none!important}@media(max-width:380px){.study{padding:14px}.controls label{max-width:100%}.menu-panels{gap:6px}.menu-panel{font-size:12px;padding:7px}.pair{gap:0}}
vendor/gsap-previews/sources/gsap-9cdf33cfed38/script.js실행 안내·자료
gsap.registerPlugin();
const q=selector=>document.querySelector(selector),qa=selector=>Array.from(document.querySelectorAll(selector));
const studyAbort=new AbortController(),studyCleanup=[];
const listen=(target,type,handler)=>target.addEventListener(type,handler,{signal:studyAbort.signal});
const preference=matchMedia('(prefers-reduced-motion: reduce)'),staticControl=q('#static-mode');
staticControl.checked=preference.matches;staticControl.disabled=preference.matches;
const isStatic=()=>staticControl.checked||preference.matches;
let applyMode=()=>{};
listen(staticControl,'change',()=>applyMode());
listen(preference,'change',()=>{staticControl.checked=preference.matches;staticControl.disabled=preference.matches;applyMode();});
listen(window,'pagehide',()=>{studyCleanup.forEach(cleanup=>cleanup());studyAbort.abort();});
const reading=text=>q('#reading').textContent=text;
const panels=qa('.menu-panel'),labels=qa('.menu-label'),bars=qa('.icon-bars span'),menu=q('.menu-panels');
const routeTimeline=gsap.timeline({paused:true});let desiredOpen=true,route='open',routeGeneration=0,stressTimer=null;
function cancelStress(){if(stressTimer!==null){clearTimeout(stressTimer);stressTimer=null;}}
function reflect(){q('#toggle-label').textContent=desiredOpen?'닫기':'열기';q('#toggle').setAttribute('aria-expanded',String(desiredOpen));menu.setAttribute('aria-hidden',String(!desiredOpen));reading('경로: '+route+' · 자식 애니메이션 '+routeTimeline.getChildren(true,true,true).length+'개');}
function finish(token,open){if(token!==routeGeneration)return;route=open?'open':'closed';reflect();}
function buildRoute(open){cancelStress();desiredOpen=open;const token=++routeGeneration;routeTimeline.pause().clear();routeTimeline.eventCallback('onComplete',()=>finish(token,open));
if(open){route='entering';routeTimeline.fromTo(panels,{xPercent:-110,yPercent:0,rotation:0,autoAlpha:0},{xPercent:0,autoAlpha:1,duration:.55,stagger:.06,ease:'power2.out'},0)
.fromTo(labels,{opacity:0},{opacity:1,duration:.3,stagger:.05},.15)
.fromTo(bars,{rotation:0,y:0},{rotation:i=>i?-45:45,y:i=>i?-3.5:3.5,duration:.3},0);}
else {route='exiting';routeTimeline.to(panels,{yPercent:150,rotation:i=>[-10,12,-6][i],autoAlpha:0,duration:.4,ease:'power2.in'},0).to(labels,{opacity:0,duration:.2},0).to(bars,{rotation:0,y:0,duration:.3},0);}
routeTimeline.play(0);if(isStatic()){routeTimeline.pause().progress(1,true);finish(token,open);}reflect();}
function reset(){cancelStress();routeGeneration++;routeTimeline.pause().clear().eventCallback('onComplete',null);gsap.set(panels,{xPercent:-110,yPercent:0,rotation:0,autoAlpha:0});gsap.set(labels,{opacity:1});gsap.set(bars,{rotation:0,y:0});desiredOpen=false;route='closed';reflect();}
listen(q('#toggle'),'click',()=>buildRoute(!desiredOpen));listen(q('#stress'),'click',()=>{buildRoute(true);if(isStatic()){buildRoute(false);return;}stressTimer=setTimeout(()=>{stressTimer=null;buildRoute(false);},150);});listen(q('#reset'),'click',reset);
applyMode=()=>{buildRoute(true);routeTimeline.pause().progress(1,true);finish(routeGeneration,true);};studyCleanup.push(()=>{cancelStress();routeTimeline.kill();});applyMode();LICENSE실행 안내·자료
Locally authored companion HTML/CSS/control wiring: MIT License.
Copyright (c) 2026 StyleGallery contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
The typed source-inputs.json and study-brief.json preserve official catalog, documentation and original library source pointers. This is independently authored API research, not a recovered CodePen source or documentation snippet. The local MIT notice does not assign new licenses to referenced third-party sources.
GSAP 3.15.0: Copyright 2026, GreenSock. All rights reserved. Subject to https://gsap.com/standard-license. Original library notices are preserved.
BEHIND THE EXAMPLE
이 장면을 만드는 원리
자식 제거와 표현 복원은 별도 작업
수명 정리에서 효과 제거, 현재 스타일 복원과 예약 입력 취소를 따로 처리합니다.
- 이 예제에서는
- routeTimeline은 한 번만 만들고 buildRoute가 pause().clear()로 자식을 지웁니다. 등장은 명시한 출발값의 fromTo, 퇴장은 현재 값의 to로 다시 구성합니다. reset은 타이머와 완료 콜백을 제거하고 패널·라벨·아이콘 값을 따로 복원합니다. 등장 중 닫기는 현재 값에서 퇴장하지만 퇴장 중 열기는 정한 출발값으로 되돌아가는 정책입니다.
코드와 함께 확인하기
