Vanilla

[{"id":"d1a8338f-3199-4137-a600-8e7b950450d0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"ee827536-3689-4e7c-b4a6-ff8fe28f0a91","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n padding: 0;\\n margin: 0;\\n}\\n\\n.fixed {\\n position: fixed;\\n top: 50%;\\n left: 50%;\\n transform: translateX(-50%);\\n text-align: center;\\n color: #fffce1;\\n z-index: 999\\n}\\n\\nhtml {\\n overflow: hidden;\\n background: #0e100f;\\n cursor: pointer;\\n}\\n.wrapper {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n min-height: 100vh;\\n}\\n\\n.transition {\\n position: absolute;\\n left: 0;\\n top: 0;\\n bottom: 0;\\n right: 0;\\n width: 100%;\\n height: 100%;\\n}\\n\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n Vanilla\\n \\n \\n\\n\\n\\n\\n\\n\\n

click me

\\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 path = document.querySelector(\\\".path\\\");\\n\\nconst start = \\\"M 0 100 V 50 Q 50 0 100 50 V 100 z\\\";\\nconst end = \\\"M 0 100 V 0 Q 50 0 100 0 V 100 z\\\";\\n\\nlet tl = gsap.timeline()\\n\\ntl.to(path, {morphSVG: start, ease: \\\"power2.in\\\"})\\n.to(path,{morphSVG: end, ease: \\\"power2.out\\\"}).reverse()\\n\\ndocument.body.addEventListener(\\\"click\\\", (e) => {\\n tl.reversed(!tl.reversed())\\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":"5c0bf228-12dd-4c05-8e3d-2bbbd376cdd0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a6f38fee-199e-41a3-8163-c5ef07d60ddf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a328606e-d3b5-4912-94b5-ef9296eb3ebf","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n background: #0e100f;\\n}\\n.shape-overlays {\\n width: 100%;\\n\\theight: 100%;\\n\\tposition: fixed;\\n\\ttop: 0;\\n\\tleft: 0;\\n cursor: pointer;\\n}\\n\\n .click-info {\\n position: fixed;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n color: white;\\n font-size: 20px;\\n cursor: pointer;\\n z-index: 10;\\n text-align: center;\\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 Click Me\\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\":\"// forked from the hero Blake bowen https://codepen.io/osublake/pen/BYwgBg & added GSAP gradients.\\n\\nconsole.clear();\\n\\nlet overlay = document.querySelector(\\\".shape-overlays\\\");\\nlet paths = document.querySelectorAll(\\\".shape-overlays__path\\\");\\n\\nlet numPoints = 10;\\nlet numPaths = paths.length;\\nlet delayPointsMax = 0.3;\\nlet delayPerPath = 0.25;\\nlet duration = 0.9;\\nlet isOpened = false;\\nlet pointsDelay = [];\\nlet allPoints = [];\\n\\nlet tl = gsap.timeline({ \\n onUpdate: render,\\n defaults: {\\n ease: \\\"power2.inOut\\\",\\n duration: 0.9\\n }\\n});\\n\\nfor (let i = 0; i < numPaths; i++) {\\n let points = [];\\n allPoints.push(points);\\n for (let j = 0; j < numPoints; j++) {\\n points.push(100);\\n }\\n}\\n\\noverlay.addEventListener(\\\"click\\\", onClick);\\ntoggle();\\n\\nfunction onClick() {\\n \\n if (!tl.isActive()) {\\n isOpened = !isOpened;\\n toggle();\\n }\\n}\\n\\nfunction toggle() {\\n \\n tl.progress(0).clear();\\n \\n for (let i = 0; i < numPoints; i++) {\\n pointsDelay[i] = Math.random() * delayPointsMax;\\n }\\n \\n for (let i = 0; i < numPaths; i++) {\\n let points = allPoints[i];\\n let pathDelay = delayPerPath * (isOpened ? i : (numPaths - i - 1));\\n \\n for (let j = 0; j < numPoints; j++) { \\n let delay = pointsDelay[j]; \\n tl.to(points, {\\n [j]: 0\\n }, delay + pathDelay);\\n }\\n }\\n}\\n\\nfunction render() {\\n \\n for (let i = 0; i < numPaths; i++) {\\n let path = paths[i];\\n let points = allPoints[i];\\n \\n let d = \\\"\\\";\\n d += isOpened ? `M 0 0 V ${points[0]} C` : `M 0 ${points[0]} C`;\\n \\n for (let j = 0; j < numPoints - 1; j++) {\\n \\n let p = (j + 1) / (numPoints - 1) * 100;\\n let cp = p - (1 / (numPoints - 1) * 100) / 2;\\n d += ` ${cp} ${points[j]} ${cp} ${points[j+1]} ${p} ${points[j+1]}`;\\n }\\n \\n d += isOpened ? ` V 100 H 0` : ` V 0 H 0`;\\n path.setAttribute(\\\"d\\\", d)\\n } \\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":"ab5722f8-4c15-44bd-a177-777363271783","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"776737e0-3f56-497b-bfb9-8aa7d3d56f50","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"/code","styles":{}}],"children":[]},{"id":"310677c7-df39-42fb-996d-b3e290b82503","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]