GSAP 사례 연구
Proximity scale grid
포인터 · MIT (local companion); GSAP Standard No Charge License (runtime)
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
저장한 HTML에서는 갤러리의 재생 설정이 적용되지 않아요.
SOURCE FILES
독립 예제 코드 읽기
사례의 구도나 문서의 원리를 바탕으로 새로 만든 예제입니다. 아래 코드를 복사해 직접 응용할 수 있습니다. 실행 HTML에는 미리보기를 위한 실행 환경이 들어 있습니다.
vendor/gsap-previews/sources/gsap-f260a6198541/study-brief.json실행 안내·자료
{
"id": "gsap-f260a6198541",
"sourceId": "gsap",
"title": "Proximity scale grid",
"sourceUrl": "https://demos.gsap.com/demo/proximity-scale-grid",
"demoUrl": "https://codepen.io/GreenSock/pen/zxKyeEm",
"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-f260a6198541",
"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-f260a6198541"
},
"sourceInputs": [
{
"kind": "authored-study-specification",
"localPath": "artifacts/full-import/gsap/remaining-docs/study-specs.json",
"sha256": "cbb89331eda8783b5cf2f173b326b9195eeabfb223374fb60019161d9f46d4a6",
"bytes": 52279,
"recordId": "gsap-f260a6198541"
},
{
"kind": "official-catalog-metadata",
"localPath": "artifacts/full-import/gsap/remaining-docs/catalog-evidence.json",
"sha256": "4f2a4f9aa64456b85b905b562b60d7733629b41026787b3057cba29e8b10de69",
"bytes": 30117,
"recordId": "gsap-f260a6198541"
},
{
"kind": "official-documentation-evidence",
"localPath": "artifacts/full-import/gsap/remaining-docs/official-documentation-evidence.json",
"sha256": "bfa25f561e61c597569cf1bc0b3538e6dce4b9985a932775ceab41e665ca24a2",
"bytes": 11430,
"recordIds": [
"map-range",
"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": "map-range",
"startLine": 574,
"endLine": 579,
"rangeSha256": "f45b5c34da3558e0f857ec22039ad21071eb4a7fb0440926af19fafcc2c6a417"
},
{
"id": "overwrite-all",
"startLine": 2403,
"endLine": 2411,
"rangeSha256": "3033b90f012d6d87330a8fca1b6ca3006c831d80930d99e3a8a16d360a32bba7"
},
{
"id": "tween-factories",
"startLine": 2637,
"endLine": 2657,
"rangeSha256": "23ae9d51865c9b7966bbc3b6cdbdb560fc790ff19e3b8bb524a3493fbf60c58a"
}
]
}
],
"studiedPrinciple": "Convert pointer distance into bounded scale intensity, replacing previous scale tweens as the pointer moves.",
"namedApis": [
{
"name": "Math.hypot(dx, dy)",
"purpose": "Compute the pointer-to-item-center distance explicitly named in the catalog description.",
"libraryEvidence": [],
"documentationEvidence": [],
"catalogEvidence": "gsap-f260a6198541"
},
{
"name": "gsap.utils.mapRange(0, radius, 1, 0, boundedDistance)",
"purpose": "Map nearer distances to larger intensity after clamping the distance in authored code.",
"libraryEvidence": [
"map-range"
],
"documentationEvidence": [
"map-range"
]
},
{
"name": "gsap.to(item, {scale, overwrite:true})",
"purpose": "Replace a target's previous scale response on each pointer update.",
"libraryEvidence": [
"tween-factories",
"overwrite-all"
],
"documentationEvidence": [
"tween"
]
}
],
"implementationBrief": {
"scene": "Sixteen simple authored marks, each centered inside an untransformed cell. Animate the inner mark so its measured center does not move when it scales.",
"controls": [
{
"label": "Pointer position",
"type": "pointer movement in stage",
"action": "Recalculate each item's distance and scale intensity."
},
{
"label": "Radius",
"type": "range",
"action": "Set the distance at which intensity reaches zero."
},
{
"label": "Maximum scale",
"type": "range",
"action": "Set the scale at zero pointer distance."
},
{
"label": "Center spotlight",
"type": "button",
"action": "Use the stage center as an authored keyboard-accessible pointer surrogate."
},
{
"label": "Reset",
"type": "button",
"action": "Restore every scale to one and clear the spotlight."
}
],
"mechanismSteps": [
"Measure the center of each untransformed cell in viewport coordinates. Use pointer clientX/clientY in the same coordinate space.",
"For each mark compute distance=Math.hypot(pointerX-centerX,pointerY-centerY), then boundedDistance=Math.min(radius,Math.max(0,distance)).",
"Compute intensity=gsap.utils.mapRange(0,radius,1,0,boundedDistance) and scale=1+intensity*(maxScale-1). Radius must remain greater than zero.",
"Animate only the inner mark using gsap.to with the selected scale, a short duration, and overwrite:true. Avoid unrelated tweens on that same mark because true overwrites all its tweens.",
"On pointerleave, Reset, or static mode restore scale one. Recompute centers after resize and relevant layout changes; do not measure the transformed mark repeatedly as feedback.",
"The center spotlight invokes the same calculation from a native button. It is a new study control, not a recovered original keyboard interaction."
]
},
"authoredDefaults": {
"grid": "4 by 4 untransformed cells",
"radiusPixels": 160,
"radiusRangePixels": [
40,
300
],
"maxScale": 1.8,
"maxScaleRange": [
1,
2.4
],
"durationSeconds": 0.2,
"ease": "power2.out",
"geometry": "New simple circles or squares"
},
"verificationRequired": [
"At distance zero the selected mark reaches maxScale; at or beyond radius it returns to one, never below one.",
"Fast pointer movement leaves one coherent response with no late tween pulling a mark toward an obsolete scale.",
"Pointerleave and Reset restore every mark. Resizing does not offset the spotlight relative to cell centers.",
"Center spotlight works with a keyboard, and reduced motion retains a readable nonmoving grid."
],
"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.",
"mapRange does not clamp automatically; the bounded distance is part of this authored implementation.",
"Original scattered positions, artwork, item count, timings, and radius are unknown. A regular grid and keyboard spotlight are new choices."
],
"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-f260a6198541/source-inputs.json실행 안내·자료
[
{
"kind": "authored-study-specification",
"localPath": "artifacts/full-import/gsap/remaining-docs/study-specs.json",
"sha256": "cbb89331eda8783b5cf2f173b326b9195eeabfb223374fb60019161d9f46d4a6",
"bytes": 52279,
"recordId": "gsap-f260a6198541"
},
{
"kind": "official-catalog-metadata",
"localPath": "artifacts/full-import/gsap/remaining-docs/catalog-evidence.json",
"sha256": "4f2a4f9aa64456b85b905b562b60d7733629b41026787b3057cba29e8b10de69",
"bytes": 30117,
"recordId": "gsap-f260a6198541"
},
{
"kind": "official-documentation-evidence",
"localPath": "artifacts/full-import/gsap/remaining-docs/official-documentation-evidence.json",
"sha256": "bfa25f561e61c597569cf1bc0b3538e6dce4b9985a932775ceab41e665ca24a2",
"bytes": 11430,
"recordIds": [
"map-range",
"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": "map-range",
"startLine": 574,
"endLine": 579,
"rangeSha256": "f45b5c34da3558e0f857ec22039ad21071eb4a7fb0440926af19fafcc2c6a417"
},
{
"id": "overwrite-all",
"startLine": 2403,
"endLine": 2411,
"rangeSha256": "3033b90f012d6d87330a8fca1b6ca3006c831d80930d99e3a8a16d360a32bba7"
},
{
"id": "tween-factories",
"startLine": 2637,
"endLine": 2657,
"rangeSha256": "23ae9d51865c9b7966bbc3b6cdbdb560fc790ff19e3b8bb524a3493fbf60c58a"
}
]
}
]
함께 쓰는 파일 4개 보기
vendor/gsap-previews/sources/gsap-f260a6198541/index.html실행 안내·자료
<main class="study"><p class="study-label">공식 API 기반 · 독립 예제</p><header><h2>거리가 정하는 강조</h2><p>가까울수록 크게, 반경 밖에서는 원래 크기로. 측정하는 칸과 확대하는 도형을 분리합니다.</p></header><div class="stage" id="proximity-stage"><div class="spot-grid"><div class="spot-cell"><div class="spot-mark" style="color:#95efd2"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#fbadce"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#ffd28c"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#897dff"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#95efd2"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#fbadce"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#ffd28c"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#897dff"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#95efd2"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#fbadce"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#ffd28c"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#897dff"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#95efd2"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#fbadce"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#ffd28c"><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></div></div><div class="spot-cell"><div class="spot-mark" style="color:#897dff"><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></div></div></div></div><div class="controls"><button id="center" type="button">중앙 비추기</button><button id="reset" type="button">초기화</button><label>반경<input id="radius" type="range" min="40" max="300" value="160" step="1"></label><label>최대 배율<input id="maximum" type="range" min="1" max="2.4" value="1.8" step="0.1"></label><label><input id="static-mode" type="checkbox">정적 보기</label></div><p class="readout" id="reading" aria-live="off"></p></main>vendor/gsap-previews/sources/gsap-f260a6198541/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}}
.spot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:240px;max-width:440px;padding:10px;width:100%}.spot-cell{align-items:center;display:flex;justify-content:center;min-width:0}.spot-mark{height:32px;width:32px}.spot-mark svg{display:block;height:100%;width:100%}#proximity-stage{touch-action:pan-y}vendor/gsap-previews/sources/gsap-f260a6198541/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 cells=qa('.spot-cell'),marks=qa('.spot-mark'),spotStage=q('#proximity-stage');let lastPointer=null;
function paint(pointer){if(isStatic()){resetSpot();return;}lastPointer=pointer;const radius=Number(q('#radius').value),maximum=Number(q('#maximum').value);
cells.forEach((cell,i)=>{const rect=cell.getBoundingClientRect();const distance=Math.hypot(pointer.x-(rect.left+rect.width/2),pointer.y-(rect.top+rect.height/2));const boundedDistance=Math.min(radius,Math.max(0,distance));const intensity=gsap.utils.mapRange(0,radius,1,0,boundedDistance);gsap.to(marks[i],{scale:1+intensity*(maximum-1),duration:.2,ease:'power2.out',overwrite:true});});reading('반경 '+radius+'px · 최대 '+maximum.toFixed(1)+'배');}
function resetSpot(){lastPointer=null;gsap.killTweensOf(marks);gsap.set(marks,{scale:1});reading(isStatic()?'정적 보기 · 모든 도형 1배':'포인터를 움직이거나 중앙 비추기를 누르세요.');}
listen(spotStage,'pointermove',e=>paint({x:e.clientX,y:e.clientY}));listen(spotStage,'pointerleave',resetSpot);listen(q('#center'),'click',()=>{const rect=spotStage.getBoundingClientRect();paint({x:rect.left+rect.width/2,y:rect.top+rect.height/2});});listen(q('#reset'),'click',resetSpot);
for(const control of ['#radius','#maximum'])listen(q(control),'input',()=>{if(lastPointer)paint(lastPointer);});listen(window,'resize',()=>{if(lastPointer)paint(lastPointer);});applyMode=resetSpot;studyCleanup.push(()=>gsap.killTweensOf(marks));resetSpot();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
이 장면을 만드는 원리
거리 측정 대상과 확대 대상 분리
효과가 측정 자체를 바꾸는 피드백을 피하고 입력 범위를 제한한 다음 표현으로 바꿉니다.
- 이 예제에서는
- paint는 변형하지 않는 칸의 getBoundingClientRect에서 중심을 읽습니다. Math.hypot 거리의 범위를 반경으로 제한하고 mapRange로 강도를 만든 다음 안쪽 mark만 확대합니다. 중앙 비추기는 같은 거리 계산의 키보드 입력이며 포인터 이탈·정적 모드는 배율을 1로 복원합니다. 측정·트윈 개수에 대한 성능 보장은 하지 않습니다.
코드와 함께 확인하기