Rolling Text stagger Button

[{"id":"e9c0fd77-9bba-4c06-922c-ad122b1fde85","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"ea24ee88-5dba-4c2d-b07a-7275b3c409d3","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #000;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.rolling-button {\\n font-weight: bold;\\n color: white;\\n border-radius: 2rem;\\n cursor: pointer;\\n width: 95.02px;\\n height: 42.66px;\\n border: none;\\n background-color: #6d4aff;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.rolling-button .span-mother,\\n.rolling-button .span-mother2 {\\n display: flex;\\n overflow: hidden;\\n pointer-events: none;\\n}\\n\\n.rolling-button .span-mother2 {\\n position: absolute;\\n}\\n\\n.rolling-button .span-mother span,\\n.rolling-button .span-mother2 span {\\n display: inline-block;\\n transition: transform var(--duration);\\n}\\n\\n.rolling-button .span-mother2 span {\\n transform: translateY(-1.2em);\\n}\\n\\n.rolling-button:hover .span-mother {\\n position: absolute;\\n}\\n\\n.rolling-button:hover .span-mother span {\\n transform: translateY(1.2em);\\n}\\n\\n.rolling-button:hover .span-mother2 span {\\n transform: translateY(0);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .rolling-button .span-mother span,\\n .rolling-button .span-mother2 span {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Rolling Text stagger Button\\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\":\"const buttons = document.querySelectorAll(\\\".rolling-button\\\");\\n\\nbuttons.forEach((button) => {\\n const text = button.dataset.text || \\\"Button\\\";\\n const layers = button.querySelectorAll(\\\".span-mother, .span-mother2\\\");\\n\\n button.setAttribute(\\\"aria-label\\\", text);\\n\\n layers.forEach((layer) => {\\n layer.innerHTML = \\\"\\\";\\n\\n text.split(\\\"\\\").forEach((letter, index) => {\\n const span = document.createElement(\\\"span\\\");\\n\\n span.textContent = letter;\\n span.style.setProperty(\\\"--duration\\\", `${0.2 + index * 0.1}s`);\\n\\n layer.appendChild(span);\\n });\\n });\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"884px","mobileWidth":"100%","height":"547px","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"eedc135f-d09e-4969-a4f1-ef603899d999","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"5d4ce865-7eec-46e4-a970-612a0cb2c26f","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"61e69d47-97ef-47f9-97ec-b408eb8a1580","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"47e2dce2-c123-4a2e-93a3-93d222e79bb8","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #111;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.rolling-button {\\n font-weight: bold;\\n color: white;\\n border-radius: 2rem;\\n cursor: pointer;\\n width: 95.02px;\\n height: 42.66px;\\n border: none;\\n background-color: #6d4aff;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.rolling-button .span-mother,\\n.rolling-button .span-mother2 {\\n display: flex;\\n overflow: hidden;\\n pointer-events: none;\\n}\\n\\n.rolling-button .span-mother2 {\\n position: absolute;\\n}\\n\\n.rolling-button .span-mother span,\\n.rolling-button .span-mother2 span {\\n display: inline-block;\\n transition: transform var(--duration);\\n}\\n\\n.rolling-button .span-mother2 span {\\n transform: translateY(-1.2em);\\n}\\n\\n.rolling-button:hover .span-mother {\\n position: absolute;\\n}\\n\\n.rolling-button:hover .span-mother span {\\n transform: translateY(1.2em);\\n}\\n\\n.rolling-button:hover .span-mother2 span {\\n transform: translateY(0);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .rolling-button .span-mother span,\\n .rolling-button .span-mother2 span {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a3f03632-751f-4792-9766-6c21b31e8639","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 3: Add JS","styles":{}}],"children":[]},{"id":"a0bc96ab-c62f-45de-92ab-0b81868f1575","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.js\",\"code\":\"const buttons = document.querySelectorAll(\\\".rolling-button\\\");\\n\\nbuttons.forEach((button) => {\\n const text = button.dataset.text || \\\"Button\\\";\\n const layers = button.querySelectorAll(\\\".span-mother, .span-mother2\\\");\\n\\n button.setAttribute(\\\"aria-label\\\", text);\\n\\n layers.forEach((layer) => {\\n layer.innerHTML = \\\"\\\";\\n\\n text.split(\\\"\\\").forEach((letter, index) => {\\n const span = document.createElement(\\\"span\\\");\\n\\n span.textContent = letter;\\n span.style.setProperty(\\\"--duration\\\", `${0.2 + index * 0.1}s`);\\n\\n layer.appendChild(span);\\n });\\n });\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"95a1735e-04e2-4d7d-8807-74c118fb1fcc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9458f668-eef1-4aef-9744-9ac1b970a40a","type":"divider","props":{},"children":[]},{"id":"7c94bf3f-5303-4925-bdbc-185001fdd9b3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Implementation\n\nNow the text is written only once using ","styles":{}},{"type":"text","text":"data-text","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"13297794-d303-4b7e-9f7c-39405652a716","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"fnapdjsf7\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6622ded2-4414-4d62-8549-cf53386bcc58","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the button text from here:","styles":{}}],"children":[]},{"id":"ec338459-b558-4c36-9160-ad9fb87d9f0f","type":"procode","props":{"code":"data-text=\"Button\"","language":"javascript","filename":"","files":"[{\"id\":\"mraurkfjk\",\"name\":\"code\",\"code\":\"data-text=\\\"Button\\\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5543ce19-ed8f-491d-8318-37841601c6ef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"1f519ef5-79da-4147-8948-2b445b3febbb","type":"procode","props":{"code":"data-text=\"Start\"","language":"javascript","filename":"","files":"[{\"id\":\"gofdr6sey\",\"name\":\"code\",\"code\":\"data-text=\\\"Start\\\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6f719756-8633-4503-a648-b88681e60e3b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic\n\nJavaScript selects every ","styles":{}},{"type":"text","text":".rolling-button","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"348b5956-4cba-4b74-84c6-27d0573722f2","type":"procode","props":{"code":"const buttons = document.querySelectorAll(\".rolling-button\");","language":"javascript","filename":"","files":"[{\"id\":\"rtx0n07fn\",\"name\":\"code\",\"code\":\"const buttons = document.querySelectorAll(\\\".rolling-button\\\");\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7cb65985-45d3-4fd2-a54f-bfc5b85433ef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Then it reads the text from ","styles":{}},{"type":"text","text":"data-text","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"0a494979-5596-41c8-85eb-3b8e8287ec6a","type":"procode","props":{"code":"const text = button.dataset.text || \"Button\";","language":"javascript","filename":"","files":"[{\"id\":\"2jd06bau9\",\"name\":\"code\",\"code\":\"const text = button.dataset.text || \\\"Button\\\";\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3544813e-dec7-469a-82b5-c444c2c93e1a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"After that, it selects both text layers.","styles":{}}],"children":[]},{"id":"061baac6-6bbe-4442-b508-0a16284fd7e2","type":"procode","props":{"code":"const layers = button.querySelectorAll(\".span-mother, .span-mother2\");","language":"javascript","filename":"","files":"[{\"id\":\"dm2g4c9j4\",\"name\":\"code\",\"code\":\"const layers = button.querySelectorAll(\\\".span-mother, .span-mother2\\\");\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"717dd15e-f30c-4e02-a393-caaaf7e23de8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For each layer, JavaScript splits the text into individual letters.","styles":{}}],"children":[]},{"id":"82e6ab98-4b74-437a-8009-e54c0d899f13","type":"procode","props":{"code":"text.split(\"\").forEach((letter, index) => {\n const span = document.createElement(\"span\");\n\n span.textContent = letter;\n span.style.setProperty(\"--duration\", `${0.2 + index * 0.1}s`);\n\n layer.appendChild(span);\n});","language":"javascript","filename":"","files":"[{\"id\":\"bbocco67k\",\"name\":\"code\",\"code\":\"text.split(\\\"\\\").forEach((letter, index) => {\\n const span = document.createElement(\\\"span\\\");\\n\\n span.textContent = letter;\\n span.style.setProperty(\\\"--duration\\\", `${0.2 + index * 0.1}s`);\\n\\n layer.appendChild(span);\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bc38f1a8-00ee-4446-94ae-ac7e3962492e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Each letter gets its own transition duration using the CSS variable ","styles":{}},{"type":"text","text":"--duration","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"d7edf492-29b7-4946-9cb2-60903c0c1b10","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CSS Animation\n\nThe first text layer is visible by default.","styles":{}}],"children":[]},{"id":"806085d3-84cd-44d9-a3fd-8582a4f851bd","type":"procode","props":{"code":".rolling-button .span-mother {\n display: flex;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kdjt20qdi\",\"name\":\"code\",\"code\":\".rolling-button .span-mother {\\n display: flex;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f0c81f64-17bd-4711-8109-119d144400ae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The second text layer starts above the button.","styles":{}}],"children":[]},{"id":"b52c75d5-5623-4e62-8d91-ef48e02c2161","type":"procode","props":{"code":".rolling-button .span-mother2 span {\n transform: translateY(-1.2em);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ds1tt8oec\",\"name\":\"code\",\"code\":\".rolling-button .span-mother2 span {\\n transform: translateY(-1.2em);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2078ca2b-5921-46b3-bbb7-1ef0249a9452","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the first text moves down.","styles":{}}],"children":[]},{"id":"14e0743f-b3cf-4382-bd36-d94eb1a0a6b0","type":"procode","props":{"code":".rolling-button:hover .span-mother span {\n transform: translateY(1.2em);\n}","language":"javascript","filename":"","files":"[{\"id\":\"fzx2rbw4v\",\"name\":\"code\",\"code\":\".rolling-button:hover .span-mother span {\\n transform: translateY(1.2em);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7200e290-33de-44e4-9290-d6776a58c424","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The second text moves into the center.","styles":{}}],"children":[]},{"id":"d85cd4f8-d62e-4119-a10b-69a6eed379ef","type":"procode","props":{"code":".rolling-button:hover .span-mother2 span {\n transform: translateY(0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"d0zhshieo\",\"name\":\"code\",\"code\":\".rolling-button:hover .span-mother2 span {\\n transform: translateY(0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"07d3c87a-7c0d-4fbd-93d4-f1a2cba1b943","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n\nThe button uses purple.","styles":{}}],"children":[]},{"id":"d6f92c94-0ea1-47c5-b89d-52f80580fdab","type":"procode","props":{"code":"background-color: #6d4aff;","language":"javascript","filename":"","files":"[{\"id\":\"u69j147ow\",\"name\":\"code\",\"code\":\"background-color: #6d4aff;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"59dfe84e-1a81-45e8-b74b-06e9e6cb1622","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]