[{"id":"230904a4-5a23-4a13-8704-916ab06e7a1c","type":"heading","props":{"backgroundColor":"rgb(1, 1, 1)","textColor":"rgb(255, 255, 255)","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Pinned panels with overscroll ","styles":{}}],"children":[]},{"id":"8cef3ab5-2386-47ed-9b41-dbb6d009450a","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing:border-box;\\n}\\nbody {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n flex-direction: column;\\n padding-top: 20vh;\\n}\\nbody > img {\\n margin-bottom: 20vh;\\n}\\n\\nimg {\\n object-fit: cover;\\n width: 300px;\\n max-width: 80vw;\\n aspect-ratio: 1/1;\\n}\\n\\n.spacer {\\n height: 100vh;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n Vanilla\\n \\n\\n\\n\\n\\n \\n\\n\\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n

\\n \\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"let proxy = { skew: 0 },\\n skewSetter = gsap.quickSetter(\\\".skewElem\\\", \\\"skewY\\\", \\\"deg\\\"), // fast\\n clamp = gsap.utils.clamp(-20, 20); // don't let the skew go beyond 20 degrees. \\n\\nScrollTrigger.create({\\n onUpdate: (self) => {\\n let skew = clamp(self.getVelocity() / -300);\\n // only do something if the skew is MORE severe. Remember, we're always tweening back to 0, so if the user slows their scrolling quickly, it's more natural to just let the tween handle that smoothly rather than jumping to the smaller skew.\\n if (Math.abs(skew) > Math.abs(proxy.skew)) {\\n proxy.skew = skew;\\n gsap.to(proxy, {skew: 0, duration: 0.8, ease: \\\"power3\\\", overwrite: true, onUpdate: () => skewSetter(proxy.skew)});\\n }\\n }\\n});\\n\\n// make the right edge \\\"stick\\\" to the scroll bar. force3D: true improves performance\\ngsap.set(\\\".skewElem\\\", {transformOrigin: \\\"right center\\\", force3D: true});\\n\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"a07eb459-c4ca-4bac-86f6-4d09bda0fffb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"23c154a2-4704-473e-bf31-7583d483d0b9","type":"heading","props":{"backgroundColor":"rgb(1, 1, 1)","textColor":"rgb(255, 255, 255)","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Scrubbed Bento Gallery","styles":{"bold":true,"textColor":"rgb(255, 255, 255)"}}],"children":[]},{"id":"ff4424db-4dc1-44cb-9727-14fcb4e5e27e","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"p {\\n font-size: 1.2rem;\\n margin-bottom: 1rem;\\n}\\n\\n.gallery-wrap {\\n position: relative;\\n width: 100%;\\n height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n overflow: hidden;\\n}\\n\\n.gallery {\\n position: relative;\\n width: 100%;\\n height: 100%;\\n flex: none;\\n}\\n\\n.gallery__item {\\n background-position: 50% 50%;\\n background-size: cover;\\n flex: none;\\n position: relative;\\n img {\\n object-fit: cover;\\n width: 100%;\\n height: 100%;\\n }\\n}\\n\\n.gallery--bento {\\n display: grid;\\n gap: 1vh;\\n grid-template-columns: repeat(3, 32.5vw);\\n grid-template-rows: repeat(4, 23vh);\\n justify-content: center;\\n align-content: center;\\n}\\n\\n.gallery--final.gallery--bento {\\n grid-template-columns: repeat(3, 100vw);\\n grid-template-rows: repeat(4, 49.5vh);\\n gap: 1vh;\\n}\\n\\n.gallery--bento .gallery__item:nth-child(1) {\\n grid-area: 1 / 1 / 3 / 2;\\n}\\n\\n.gallery--bento .gallery__item:nth-child(2) {\\n grid-area: 1 / 2 / 2 / 3;\\n}\\n\\n.gallery--bento .gallery__item:nth-child(3) {\\n grid-area: 2 / 2 / 4 / 3;\\n}\\n\\n.gallery--bento .gallery__item:nth-child(4) {\\n grid-area: 1 / 3 / 3 / 3;\\n}\\n\\n.gallery--bento .gallery__item:nth-child(5) {\\n grid-area: 3 / 1 / 3 / 2;\\n}\\n\\n.gallery--bento .gallery__item:nth-child(6) {\\n grid-area: 3 / 3 / 5 / 4;\\n}\\n\\n.gallery--bento .gallery__item:nth-child(7) {\\n grid-area: 4 / 1 / 5 / 2;\\n}\\n\\n.gallery--bento .gallery__item:nth-child(8) {\\n grid-area: 4 / 2 / 5 / 3;\\n}\\n\\n.section {\\n padding: 2rem 5rem;\\n}\\n\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n Vanilla\\n \\n \\n\\n\\n\\n\\n\\n\\n\\n\\n\\n

\\n

\\n $\\\"\\\"$ \\n

\\n

\\n $\\\"\\\"$ \\n

\\n

\\n $\\\"\\\"$ \\n

\\n

\\n $\\\"\\\"$ \\n

\\n

\\n $\\\"\\\"$ \\n

\\n

\\n $\\\"\\\"$ \\n

\\n

\\n $\\\"\\\"$ \\n

\\n

\\n $\\\"\\\"$ \\n

\\n\\n

\\n

Here is some content

\\n

\\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

\\n

\\n\\n

\\n \\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.clear();\\n\\ngsap.registerPlugin(ScrollTrigger);\\ngsap.registerPlugin(Flip);\\n\\nlet flipCtx;\\n\\nconst createTween = () => {\\n let galleryElement = document.querySelector(\\\"#gallery-8\\\");\\n let galleryItems = galleryElement.querySelectorAll(\\\".gallery__item\\\");\\n\\n console.log(flipCtx);\\n\\n flipCtx && flipCtx.revert();\\n galleryElement.classList.remove(\\\"gallery--final\\\");\\n\\n flipCtx = gsap.context(() => {\\n // Temporarily add the final class to capture the final state\\n galleryElement.classList.add(\\\"gallery--final\\\");\\n const flipState = Flip.getState(galleryItems);\\n galleryElement.classList.remove(\\\"gallery--final\\\");\\n\\n const flip = Flip.to(flipState, {\\n simple: true,\\n ease: \\\"expoScale(1, 5)\\\"\\n });\\n\\n const tl = gsap.timeline({\\n scrollTrigger: {\\n trigger: galleryElement,\\n start: \\\"center center\\\",\\n end: \\\"+=100%\\\",\\n scrub: true,\\n pin: galleryElement.parentNode\\n // markers: true\\n }\\n });\\n tl.add(flip);\\n return () => gsap.set(galleryItems, { clearProps: \\\"all\\\" });\\n });\\n};\\ncreateTween();\\n\\nwindow.addEventListener(\\\"resize\\\", createTween);\\n\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"567e03d3-5f37-4279-88be-440d74d2497f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"d0fb1d9b-dfd1-4ae5-83b2-a56557405b82","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"68100432-0d2c-44d8-a5af-2649405b1281","type":"heading","props":{"backgroundColor":"rgb(1, 1, 1)","textColor":"rgb(255, 255, 255)","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"250f815e-f61c-448a-a105-45314535bc4c","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n margin: 0;\\n padding: 0;\\n}\\n\\nbody {\\n font-family: system-ui, sans-serif;\\n background: #0b0d0f;\\n color: #e5e7eb;\\n overflow-x: hidden;\\n}\\n\\n/* HERO SECTION */\\n.description {\\n height: 100vh;\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n align-items: center;\\n text-align: center;\\n}\\n\\n.description h1 {\\n font-size: 3rem;\\n font-weight: 600;\\n background: linear-gradient(90deg, #ff87f9, #d4d4d8);\\n -webkit-background-clip: text;\\n -webkit-text-fill-color: transparent;\\n margin-bottom: 1rem;\\n}\\n\\n.description p {\\n font-size: 1.1rem;\\n color: #a1a1aa;\\n}\\n\\n/* SCROLL INDICATOR */\\n.scroll-down {\\n position: absolute;\\n bottom: 40px;\\n}\\n\\n.arrow {\\n width: 20px;\\n height: 20px;\\n border-bottom: 2px solid #a1a1aa;\\n border-right: 2px solid #a1a1aa;\\n transform: rotate(45deg);\\n animation: bounce 1.5s infinite;\\n}\\n\\n@keyframes bounce {\\n 0%, 100% { transform: rotate(45deg) translateY(0); }\\n 50% { transform: rotate(45deg) translateY(10px); }\\n}\\n\\n/* PANELS */\\n.panel {\\n height: 100vh;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n font-size: 3rem;\\n font-weight: bold;\\n background: #111827;\\n border-top: 1px solid #1f2937;\\n}\\n\\n.panel__number {\\n color: #e5e7eb;\\n}\\n\\n/* COLORS */\\n.green { background: #064e3b; }\\n.purple { background: #3b0764; }\\n.blue { background: #0c4a6e; }\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n Vanilla\\n \\n\\n \\n \\n\\n\\n

\\n

Layered pinning with infinite looping

\\n

Use pinning to layer panels on top of each other as you scroll.

\\n

\\n\\n

\\n\\n\\n

\\n\\t

1

\\n

\\n\\t

2

\\n

\\n\\t

3

\\n

\\n\\t

4

\\n

\\n\\t

5

\\n

\\n\\n \\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"document.addEventListener(\\\"DOMContentLoaded\\\", () => {\\n gsap.registerPlugin(ScrollTrigger);\\n\\n let panels = gsap.utils.toArray(\\\".panel\\\");\\n\\n // clone first panel for seamless loop\\n const clone = panels[0].cloneNode(true);\\n panels[0].parentNode.appendChild(clone);\\n\\n panels = gsap.utils.toArray(\\\".panel\\\");\\n\\n // pin panels\\n panels.forEach((panel) => {\\n ScrollTrigger.create({\\n trigger: panel,\\n start: \\\"top top\\\",\\n pin: true,\\n pinSpacing: false\\n });\\n });\\n\\n let maxScroll = 0;\\n\\n const pageST = ScrollTrigger.create({\\n snap: {\\n snapTo: 1 / panels.length,\\n duration: 0.3,\\n ease: \\\"power1.inOut\\\"\\n }\\n });\\n\\n function updateMaxScroll() {\\n maxScroll = ScrollTrigger.maxScroll(window);\\n }\\n\\n updateMaxScroll();\\n window.addEventListener(\\\"resize\\\", updateMaxScroll);\\n\\n // smooth infinite loop (no preventDefault, no jitter)\\n let isJumping = false;\\n\\n window.addEventListener(\\\"scroll\\\", () => {\\n if (isJumping) return;\\n\\n const scroll = pageST.scroll();\\n\\n if (scroll >= maxScroll - 2) {\\n isJumping = true;\\n pageST.scroll(2);\\n requestAnimationFrame(() => (isJumping = false));\\n }\\n\\n if (scroll <= 2) {\\n isJumping = true;\\n pageST.scroll(maxScroll - 2);\\n requestAnimationFrame(() => (isJumping = false));\\n }\\n });\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"5a23875e-5feb-4cd4-a3f1-90a91a443757","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"4e5fae88-b48a-482d-89b9-8ca535278f99","type":"paragraph","props":{"backgroundColor":"default","textColor":"rgb(255, 252, 225)","textAlignment":"left"},"content":[],"children":[]},{"id":"ad4de1a4-0187-46a7-92d5-af7b5c58300d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"6458c738-13c9-4391-878f-5203888634ad","type":"heading","props":{"backgroundColor":"default","textColor":"rgb(255, 252, 225)","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Scroll waypoints","styles":{}}],"children":[]},{"id":"7f090e66-f828-4ffb-af66-b892e893ea4a","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n background-color: #000;\\n }\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n}\\n\\n.spacer {\\n width: 100%;\\n height: 20vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.main {\\n position: relative;\\n height: 100vh;\\n min-height: 800px;\\n}\\n\\n.container {\\n position: absolute;\\n width: 140px;\\n height: 140px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n border: 2px dashed var(--color-surface50);\\n border-radius: 10px;\\n}\\n\\n.initial {\\n left: 60%;\\n top: 10%;\\n}\\n\\n.box {\\n width: 100px;\\n height: 100px;\\n position: relative;\\n z-index: 10;\\n border-radius: 10px;\\n background-size: contain;\\n background-repeat: no-repeat;\\n background-color: transparent;\\n background-image: url(\\\"https://assets.codepen.io/16327/circle.png\\\");\\n}\\n\\n.second {\\n left: 10%;\\n top: 50%;\\n}\\n\\n.marker {\\n border-radius: 10px;\\n}\\n\\n.second .marker {\\n width: 100px;\\n height: 100px;\\n}\\n\\n.third {\\n right: 10%;\\n bottom: 3rem;\\n}\\n\\n.third .marker {\\n width: 100px;\\n height: 100px;\\n}\\n\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n Vanilla\\n \\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n

\\n scroll down\\n

\\n

\\n\\n

\\n\\n \\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.clear();\\n\\ngsap.registerPlugin(Flip, ScrollTrigger);\\n\\nlet flipCtx;\\n\\nconst createTimeline = () => {\\n flipCtx && flipCtx.revert();\\n\\n flipCtx = gsap.context(() => {\\n const secondState = Flip.getState(\\\".second .marker\\\");\\n const thirdState = Flip.getState(\\\".third .marker\\\");\\n const flipConfig = {\\n ease: \\\"none\\\",\\n duration: 1\\n };\\n\\n const tl = gsap.timeline({\\n scrollTrigger: {\\n trigger: \\\".container.initial\\\",\\n start: \\\"clamp(top center)\\\",\\n endTrigger: \\\".final\\\",\\n end: \\\"clamp(top center)\\\",\\n scrub: 1\\n // markers: true\\n }\\n });\\n\\n tl.add(Flip.fit(\\\".box\\\", secondState, flipConfig)).add(\\n Flip.fit(\\\".box\\\", thirdState, flipConfig),\\n \\\"+=0.5\\\"\\n );\\n });\\n};\\n\\ncreateTimeline();\\n\\nwindow.addEventListener(\\\"resize\\\", createTimeline);\\n\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/styles.css","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"6afae795-53be-4376-a1a9-8bc5d50bd703","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a45749a4-abd7-46e0-ae71-b38b52f94f73","type":"heading","props":{"backgroundColor":"rgb(1, 1, 1)","textColor":"rgb(255, 255, 255)","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"f94ccfce-4fce-4922-bbe1-076fb72a867f","type":"heading","props":{"backgroundColor":"rgb(1, 1, 1)","textColor":"rgb(255, 255, 255)","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"c4a46933-7e90-4bdb-adb6-0eeacafb706f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c0d75ce1-d356-4ab5-85d8-3f5dd7b90951","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"5fae4fa0-cc22-4393-b6f2-e6dc4bac13a3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"51699156-8984-42b9-a840-a1a0239309e1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"491cb80c-e109-40e5-8544-419e9e782e95","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]