{ "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 }