Fade In Up - GSAP Text Only

[{"id":"5b9db8cf-5d66-4711-9b95-96bc5fe4e404","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"7c5f548b-fc74-4591-bbd3-8d220cd1421d","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n font-family:\\n system-ui,\\n -apple-system,\\n sans-serif;\\n background: #050505;\\n color: #fff;\\n overflow-x: hidden;\\n}\\n\\n.main {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 0 5vw;\\n background: #050505;\\n}\\n\\n.text-container {\\n display: block;\\n text-align: center;\\n padding: 40px;\\n font-size: clamp(2rem, 5vw, 4rem);\\n font-weight: 600;\\n line-height: 1.2;\\n max-width: 900px;\\n margin: 0 auto;\\n}\\n\\n.word {\\n display: inline-block;\\n margin-right: 0.25em;\\n opacity: 0;\\n transform: translateY(30px);\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Fade In Up - GSAP Text Only\\n \\n \\n \\n

\\n

\\n Stay hungry, stay foolish. Dream big and dare to fail.\\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 container = document.getElementById(\\\"text-container\\\");\\nconst text = container.textContent.trim();\\n\\ncontainer.innerHTML = \\\"\\\";\\n\\nconst words = text.split(\\\" \\\");\\n\\nwords.forEach((word) => {\\n const span = document.createElement(\\\"span\\\");\\n span.className = \\\"word\\\";\\n span.textContent = word;\\n container.appendChild(span);\\n});\\n\\ngsap.to(\\\".word\\\", {\\n opacity: 1,\\n y: 0,\\n duration: 1,\\n stagger: 0.04,\\n ease: \\\"power3.out\\\",\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"b04c9df6-023a-4bea-a8c2-c207e9998702","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"437cdb0e-d954-41be-b244-ab9898ec3291","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"with scroll trigger","styles":{}}],"children":[]},{"id":"edecff36-2351-45d3-8a1a-aeaeab7bd882","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\n.main {\\n background: #050505;\\n}\\n\\n.intro-section {\\n height: 100vh;\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n justify-content: center;\\n font-size: clamp(1.5rem, 4vw, 3rem);\\n font-weight: 700;\\n background-color: #ffffff;\\n color: #000000;\\n}\\n\\n.outro-section {\\n height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n background-color: #f3ebff;\\n color: #000;\\n}\\n\\n.outro-section h2 {\\n font-size: clamp(3rem, 8vw, 6rem);\\n font-weight: 700;\\n margin: 0;\\n}\\n\\n.animation-section {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 0 5vw;\\n position: relative;\\n background: #050505;\\n color: #fff;\\n overflow: hidden;\\n\\n min-height: 100vh;\\n}\\n\\nbody {\\n margin: 0;\\n font-family:\\n system-ui,\\n -apple-system,\\n sans-serif;\\n background: #050505;\\n color: #fff;\\n overflow-x: hidden;\\n}\\n\\n.text-container {\\n display: block;\\n text-align: center;\\n padding: 40px;\\n font-size: clamp(2rem, 5vw, 4rem);\\n font-weight: 600;\\n line-height: 1.2;\\n max-width: 900px;\\n margin: 0 auto;\\n}\\n.word {\\n display: inline-block;\\n margin-right: 0.25em;\\n opacity: 0;\\n transform: translateY(30px);\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Fade In Up - GSAP\\n \\n \\n \\n

\\n

KEEP SCROLLING

\\n

\\n Stay hungry, stay foolish. Dream big and dare to fail.\\n

\\n

\\n \\n RELOAD TO SEE ANIMATION AGAIN\\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\":\"gsap.registerPlugin(ScrollTrigger);\\n\\nconst container = document.getElementById(\\\"text-container\\\");\\nconst text = container.textContent.trim();\\ncontainer.innerHTML = \\\"\\\";\\n\\nconst words = text.split(\\\" \\\");\\nwords.forEach((word) => {\\n const span = document.createElement(\\\"span\\\");\\n span.className = \\\"word\\\";\\n span.textContent = word;\\n container.appendChild(span);\\n});\\n\\ngsap.to(\\\".word\\\", {\\n scrollTrigger: {\\n trigger: container,\\n start: \\\"top 70%\\\",\\n },\\n opacity: 1,\\n y: 0,\\n duration: 1,\\n stagger: 0.04,\\n ease: \\\"power3.out\\\",\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"23c87339-87c5-4326-8684-e10dddfea37c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"setup : external script","styles":{}}],"children":[]},{"id":"dd218246-858c-4ad7-8dff-f58e53016b48","type":"procode","props":{"code":"\n","language":"javascript","filename":"","files":"[{\"id\":\"pvn2gyuvx\",\"name\":\"code\",\"code\":\" \\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"22784f00-27ed-4d38-b55f-ac5f4375fcb1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"fe5bd77c-7c40-45a6-904e-288f2af9ca37","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"477c75c5-0745-4ace-a17a-8d4901dd2d0e","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

KEEP SCROLLING

\\n

\\n Stay hungry, stay foolish. Dream big and dare to fail.\\n

\\n

\\n \\n RELOAD TO SEE ANIMATION AGAIN\\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e8629d9e-5713-4775-9789-370e1dba4124","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"fc02cff8-2113-452f-8156-dcd0557e4c36","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\n.main {\\n background: #050505;\\n}\\n\\n.intro-section {\\n height: 100vh;\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n justify-content: center;\\n font-size: clamp(1.5rem, 4vw, 3rem);\\n font-weight: 700;\\n background-color: #ffffff;\\n color: #000000;\\n}\\n\\n.outro-section {\\n height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n background-color: #f3ebff;\\n color: #000;\\n}\\n\\n.outro-section h2 {\\n font-size: clamp(3rem, 8vw, 6rem);\\n font-weight: 700;\\n margin: 0;\\n}\\n\\n.animation-section {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 0 5vw;\\n position: relative;\\n background: #050505;\\n color: #fff;\\n overflow: hidden;\\n\\n min-height: 100vh;\\n}\\n\\nbody {\\n margin: 0;\\n font-family:\\n system-ui,\\n -apple-system,\\n sans-serif;\\n background: #050505;\\n color: #fff;\\n overflow-x: hidden;\\n}\\n\\n.text-container {\\n display: block;\\n text-align: center;\\n padding: 40px;\\n font-size: clamp(2rem, 5vw, 4rem);\\n font-weight: 600;\\n line-height: 1.2;\\n max-width: 900px;\\n margin: 0 auto;\\n}\\n.word {\\n display: inline-block;\\n margin-right: 0.25em;\\n opacity: 0;\\n transform: translateY(30px);\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3c50c470-27df-46e8-8c74-769f0b6ae233","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 3: Add JS","styles":{}}],"children":[]},{"id":"c4428368-221a-431e-8615-279a7725118d","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.js\",\"code\":\"gsap.registerPlugin(ScrollTrigger);\\n\\nconst container = document.getElementById(\\\"text-container\\\");\\nconst text = container.textContent.trim();\\ncontainer.innerHTML = \\\"\\\";\\n\\nconst words = text.split(\\\" \\\");\\nwords.forEach((word) => {\\n const span = document.createElement(\\\"span\\\");\\n span.className = \\\"word\\\";\\n span.textContent = word;\\n container.appendChild(span);\\n});\\n\\ngsap.to(\\\".word\\\", {\\n scrollTrigger: {\\n trigger: container,\\n start: \\\"top 70%\\\",\\n },\\n opacity: 1,\\n y: 0,\\n duration: 1,\\n stagger: 0.04,\\n ease: \\\"power3.out\\\",\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"33f20b7e-40a3-4d97-a910-07825e2a5f78","type":"divider","props":{},"children":[]},{"id":"b003c8d0-5500-4b97-b942-e04849b03f65","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"a0415712-3f67-49db-bff0-053f3ba890e3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Code Flow\nThe page starts from ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":". It loads ","styles":{}},{"type":"text","text":"/styles.css","styles":{"code":true}},{"type":"text","text":", then loads GSAP and ScrollTrigger from CDN before running ","styles":{}},{"type":"text","text":"/index.js","styles":{"code":true}},{"type":"text","text":". The text is written normally inside ","styles":{}},{"type":"text","text":"#text-container","styles":{"code":true}},{"type":"text","text":", then JavaScript converts that sentence into separate word spans. GSAP animates those words when the section scrolls into view.","styles":{}}],"children":[]},{"id":"f0b9b70d-5920-4670-a48b-93eebc3f8c49","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"External Scripts\n\nGSAP handles the fade and upward movement. ScrollTrigger starts the animation based on scroll position.","styles":{}}],"children":[]},{"id":"66e8c767-97b9-40ca-aa09-d30a91229381","type":"procode","props":{"code":"\n","language":"javascript","filename":"","files":"[{\"id\":\"pzk8xk455\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f04ca7c8-2b59-4f58-970b-121eb1eb8735","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Structure\n\nThe page has three vertical sections. The middle section contains the animated sentence.","styles":{}}],"children":[]},{"id":"869da978-09eb-4ea3-8a68-35fed3bd6375","type":"procode","props":{"code":"

\n Stay hungry, stay foolish. Dream big and dare to fail.\n

","language":"javascript","filename":"","files":"[{\"id\":\"eaow50tn8\",\"name\":\"code\",\"code\":\"

\\n

\\n Stay hungry, stay foolish. Dream big and dare to fail.\\n

\\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"86111946-8622-4949-b8c6-4b973feca9b8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Source\n\nJavaScript reads the original text from the container before replacing it.","styles":{}}],"children":[]},{"id":"54e9ff95-3edf-4eff-9b8b-082e67235027","type":"procode","props":{"code":"const container = document.getElementById(\"text-container\");\nconst text = container.textContent.trim();","language":"javascript","filename":"","files":"[{\"id\":\"5eio62jh7\",\"name\":\"code\",\"code\":\"const container = document.getElementById(\\\"text-container\\\");\\nconst text = container.textContent.trim();\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de74f52f-553e-4ba9-a8c6-a0014d43b130","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Word Creation Flow\n\nThe original sentence is cleared, split by spaces, then rebuilt as individual ","styles":{}},{"type":"text","text":".word","styles":{"code":true}},{"type":"text","text":" spans. This is what allows GSAP to animate every word separately.","styles":{}}],"children":[]},{"id":"ed4fb7aa-2d37-4170-ae5e-df0bd5b3e7be","type":"procode","props":{"code":"container.innerHTML = \"\";\n\nconst words = text.split(\" \");\nwords.forEach((word) => {\n const span = document.createElement(\"span\");\n span.className = \"word\";\n span.textContent = word;\n container.appendChild(span);\n});","language":"javascript","filename":"","files":"[{\"id\":\"lrl9j1tt1\",\"name\":\"code\",\"code\":\"container.innerHTML = \\\"\\\";\\n\\nconst words = text.split(\\\" \\\");\\nwords.forEach((word) => {\\n const span = document.createElement(\\\"span\\\");\\n span.className = \\\"word\\\";\\n span.textContent = word;\\n container.appendChild(span);\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4ca3c08b-7ba4-4c16-9006-ffb5d8cb3c44","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Initial Word State\n\nEach ","styles":{}},{"type":"text","text":".word","styles":{"code":true}},{"type":"text","text":" starts invisible and shifted down by ","styles":{}},{"type":"text","text":"30px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"50ef62c0-13cd-407a-90ab-b565d8c89afa","type":"procode","props":{"code":".word {\n opacity: 0;\n transform: translateY(30px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"6287ft4fx\",\"name\":\"code\",\"code\":\".word {\\n opacity: 0;\\n transform: translateY(30px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ffa87ae1-01f8-44b5-a783-45fe14d336a7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"GSAP Plugin Setup\n\nScrollTrigger is registered before creating the animation.","styles":{}}],"children":[]},{"id":"064dd9ba-85d6-4820-bdb0-98c5a1548d89","type":"procode","props":{"code":"gsap.registerPlugin(ScrollTrigger);","language":"javascript","filename":"","files":"[{\"id\":\"i2zci23cz\",\"name\":\"code\",\"code\":\"gsap.registerPlugin(ScrollTrigger);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2974f66c-a75a-4713-8bed-66bc5131cf28","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Scroll Trigger Flow\n\nThe animation starts when the top of the text container reaches ","styles":{}},{"type":"text","text":"70%","styles":{"code":true}},{"type":"text","text":" of the viewport height.","styles":{}}],"children":[]},{"id":"bf1c65a4-5e65-4013-b93d-768f5614e3a8","type":"procode","props":{"code":"scrollTrigger: {\n trigger: container,\n start: \"top 70%\",\n}","language":"javascript","filename":"","files":"[{\"id\":\"7lble9ulc\",\"name\":\"code\",\"code\":\"scrollTrigger: {\\n trigger: container,\\n start: \\\"top 70%\\\",\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e4742dc3-f5ce-4776-8693-3d3066f03f81","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation Flow\n\nGSAP animates every ","styles":{}},{"type":"text","text":".word","styles":{"code":true}},{"type":"text","text":" to full opacity and ","styles":{}},{"type":"text","text":"y: 0","styles":{"code":true}},{"type":"text","text":". Since CSS already sets ","styles":{}},{"type":"text","text":"translateY(30px)","styles":{"code":true}},{"type":"text","text":", GSAP moves each word upward into place.","styles":{}}],"children":[]},{"id":"1b7378f2-51de-4122-993a-97dacd5b6a3d","type":"procode","props":{"code":"gsap.to(\".word\", {\n opacity: 1,\n y: 0,\n duration: 1,\n stagger: 0.04,\n ease: \"power3.out\",\n});","language":"javascript","filename":"","files":"[{\"id\":\"7l731kbl1\",\"name\":\"code\",\"code\":\"gsap.to(\\\".word\\\", {\\n opacity: 1,\\n y: 0,\\n duration: 1,\\n stagger: 0.04,\\n ease: \\\"power3.out\\\",\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3735a849-9cdb-44a6-8e19-2a5edf53ce53","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Stagger\n\nEach word starts ","styles":{}},{"type":"text","text":"0.04s","styles":{"code":true}},{"type":"text","text":" after the previous word.","styles":{}}],"children":[]},{"id":"2875ebac-a54d-4a50-bc93-81c26c8c1e51","type":"procode","props":{"code":"stagger: 0.04;","language":"javascript","filename":"","files":"[{\"id\":\"8zyz9aolb\",\"name\":\"code\",\"code\":\"stagger: 0.04;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2789f9da-322a-4a92-b0a4-ac7c27921170","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration / Easing\n\nThe animation takes ","styles":{}},{"type":"text","text":"1s","styles":{"code":true}},{"type":"text","text":" per word and uses ","styles":{}},{"type":"text","text":"power3.out","styles":{"code":true}},{"type":"text","text":" for a smooth Awwwards-style ease.","styles":{}}],"children":[]},{"id":"43eaaf90-38c9-4f8b-8bb3-a18ec6cd80b5","type":"procode","props":{"code":"duration: 1;\nease: \"power3.out\";","language":"javascript","filename":"","files":"[{\"id\":\"p2jknglmq\",\"name\":\"code\",\"code\":\"duration: 1;\\nease: \\\"power3.out\\\";\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"81520e3c-8d07-4e66-aaa6-bcb9e0cf5c7e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout Flow\n\nThe intro and outro are full-screen sections. The animation section also fills the viewport and centers the sentence.","styles":{}}],"children":[]},{"id":"73dcadfa-3931-4524-b5ed-e90c19c4fff1","type":"procode","props":{"code":".animation-section {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kcskgd36v\",\"name\":\"code\",\"code\":\".animation-section {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fdba8c32-4fee-4f54-8d2a-46cf7b94e225","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color","styles":{}}],"children":[]},{"id":"4a7cad59-8b93-4df3-b325-eb1a5d3df326","type":"procode","props":{"code":"background: #050505;\ncolor: #fff;\nbackground-color: #ffffff;\ncolor: #000000;\nbackground-color: #f3ebff;","language":"javascript","filename":"","files":"[{\"id\":\"2d48jc7vo\",\"name\":\"code\",\"code\":\"background: #050505;\\ncolor: #fff;\\nbackground-color: #ffffff;\\ncolor: #000000;\\nbackground-color: #f3ebff;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"73ba3d6d-fd21-4861-97c0-c95e6dc96b7e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic\n\nJavaScript converts the sentence into individual word elements, then GSAP waits until the text scrolls into view. Once triggered, every word fades in and moves up with a small stagger, creating the fade-in-up reveal.","styles":{}}],"children":[]},{"id":"fe31068c-3eb9-4ac2-bd74-bfe1e6193fb8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]