Download Code
<!-- wp:greenshift-blocks/element {"id":"gsbp-69633d3","dynamicGClasses":[{"value":"intro-spacer","type":"local","label":"intro-spacer","localed":false,"css":".intro-spacer{height:50vh;width:100%;display:flex;justify-content:center;align-items:center;color:#999;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.1em;}","attributes":{"styleAttributes":{"height":["50vh"],"width":["100%"],"display":["flex"],"justifyContent":["center"],"alignItems":["center"],"color":["#999"],"fontSize":["0.9rem"],"textTransform":["uppercase"],"letterSpacing":["0.1em"]}},"originalID":"gsbp-69633d3","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"content-wrapper","type":"local","label":"content-wrapper","localed":false,"css":".content-wrapper{width: 100%;\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-start;\n            align-items: center;\n            padding-bottom: 40vh; \n            position: relative;\n            z-index: 1;}","attributes":{"styleAttributes":{"width":["100%"],"display":["flex"],"flexDirection":["column"],"justifyContent":["flex-start"],"alignItems":["center"],"paddingBottom":["40vh"],"position":["relative"],"zIndex":["1"]}},"originalID":"gsbp-69633d3","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"manifesto-container","type":"local","label":"manifesto-container","localed":false,"css":".manifesto-container{width: 95%;\n            max-width: 1400px;\n            padding: 2rem;\n            text-align: center;\n            opacity: 0; \n            animation: fadeIn 1.2s ease forwards;}","attributes":{"styleAttributes":{"width":["95%"],"maxWidth":["1400px"],"padding":["2rem"],"textAlign":["center"],"opacity":["0"],"animation":["fadeIn 1.2s ease forwards"]}},"originalID":"gsbp-69633d3","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"line","type":"local","label":"line","localed":false,"css":".line{display: flex;\n            flex-wrap: nowrap;\n            justify-content: center;\n            align-items: center;\n            gap: 0.25em;\n            margin-bottom: 0.15em;\n            \n            font-size: clamp(2rem, 5.5vw, 5rem);\n            font-weight: 900;\n            line-height: 1.1;\n            letter-spacing: -0.04em;}","attributes":{"styleAttributes":{"display":["flex"],"flexWrap":["nowrap"],"justifyContent":["center"],"alignItems":["center"],"gap":["0.25em"],"marginBottom":["0.15em"],"fontSize":["clamp(2rem, 5.5vw, 5rem)"],"fontWeight":["900"],"lineHeight":["1.1"],"letterSpacing":["-0.04em"]}},"originalID":"gsbp-69633d3","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"word","type":"local","label":"word","localed":false,"css":".word{display: inline-block;\n            white-space: pre;\n            color: #1a1a1a;\n            \n            \n            \n            -webkit-mask-image: linear-gradient(90deg, #fff 33.3%, rgba(255, 255, 255, 0.1) 66.6%);\n            mask-image: linear-gradient(90deg, #fff 33.3%, rgba(255, 255, 255, 0.1) 66.6%);\n            \n            -webkit-mask-size: 300% 100%;\n            mask-size: 300% 100%;\n            \n            \n            -webkit-mask-position: 100% 0;\n            mask-position: 100% 0;\n            \n            \n            transition: mask-position 2.5s cubic-bezier(0.16, 1, 0.3, 1);\n            \n            will-change: mask-position;}","attributes":{"styleAttributes":{"display":["inline-block"],"color":["#1a1a1a"],"maskImage":["linear-gradient(90deg, #fff 33.3%, rgba(255, 255, 255, 0.1) 66.6%)"],"maskSize":["300% 100%"],"maskPosition":["100% 0"],"transition":["mask-position 2.5s cubic-bezier(0.16, 1, 0.3, 1)"],"customCSS_Extra":"{CURRENT}{white-space:pre;-webkit-mask-image:linear-gradient(90deg, #fff 33.3%, rgba(255, 255, 255, 0.1) 66.6%);-webkit-mask-size:300% 100%;-webkit-mask-position:100% 0;will-change:mask-position}{CURRENT}{-webkit-mask-position:0% 0}"}},"originalID":"gsbp-69633d3","originalBlock":"greenshift-blocks/element","selectors":[{"value":".revealed","attributes":{"styleAttributes":{"maskPosition":["0% 0"],"customCSS_Extra":"{CURRENT}.revealed{-webkit-mask-position:0% 0}"}},"css":".word.revealed{-webkit-mask-position: 0% 0;\n            mask-position: 0% 0;}"}]},{"value":"image-wrapper","type":"local","label":"image-wrapper","localed":false,"css":".image-wrapper{display:inline-flex;overflow:hidden;height:0.8em;border-radius:0.1em;width:0px;opacity:0;margin:0;transition:width 2.5s cubic-bezier(0.16, 1, 0.3, 1),\n                margin 2.5s cubic-bezier(0.16, 1, 0.3, 1),\n                opacity 1.5s ease-out;flex-shrink:0;}.image-wrapper{vertical-align:middle;will-change:width, margin, opacity}","attributes":{"styleAttributes":{"display":["inline-flex"],"overflow":["hidden"],"height":["0.8em"],"borderRadius":["0.1em"],"width":["0px"],"opacity":["0"],"margin":["0"],"transition":["width 2.5s cubic-bezier(0.16, 1, 0.3, 1),\n                margin 2.5s cubic-bezier(0.16, 1, 0.3, 1),\n                opacity 1.5s ease-out"],"flexShrink":["0"],"customCSS_Extra":"{CURRENT}{vertical-align:middle;will-change:width, margin, opacity}"}},"originalID":"gsbp-69633d3","originalBlock":"greenshift-blocks/element","selectors":[{"value":".revealed","attributes":{"styleAttributes":{"width":["var(\u002d\u002dtarget-width)"],"opacity":["1"],"margin":["0 0.25em"]}},"css":".image-wrapper.revealed{width:var(\u002d\u002dtarget-width);opacity:1;margin:0 0.25em;}"},{"value":" img","attributes":{"styleAttributes":{"height":["100%"],"width":["auto"],"display":["block"],"objectFit":["cover"]}},"css":".image-wrapper img{height:100%;width:auto;display:block;object-fit:cover;}"}],"localedSpace":""},{"value":"image-editor","type":"local","label":"image-editor","localed":false,"css":"body.gspb-bodyadmin .image-editor{width:auto !important; opacity:1}","attributes":{"styleAttributes":{"customCSS_Extra":"{CURRENT}{width:auto !important; opacity:1}"}},"originalID":"gsbp-69633d3","originalBlock":"greenshift-blocks/element","tag":"div","selectors":[],"localedSpace":"editor"}],"metadata":{"name":"Text Reveal Controller"},"type":"no","className":"intro-spacer content-wrapper manifesto-container line word image-wrapper image-editor","localId":"gsbp-69633d3","isVariation":"stylemanager","customCss":"@keyframes fadeIn {\n            to { opacity: 1; }\n        }","customJs":"(function () {\n\n    const gsManifestoRevealContainers = document.querySelectorAll('.manifesto-container');\n\n    let gsManifestoRevealTicking = false;\n    const gsManifestoRevealInstances = [];\n\n    function gsManifestoRevealInit() {\n        gsManifestoRevealContainers.forEach(container =\u003e {\n\n            const gsManifestoRevealNodes = container.querySelectorAll('.word, .image-wrapper');\n\n            const gsManifestoRevealItems = Array.from(gsManifestoRevealNodes).map(node =\u003e ({\n                node: node,\n                type: node.classList.contains('image-wrapper') ? 'image' : 'text'\n            }));\n\n            const gsManifestoRevealInstance = {\n                container,\n                items: gsManifestoRevealItems,\n                nodes: gsManifestoRevealNodes\n            };\n\n            gsManifestoRevealInstances.push(gsManifestoRevealInstance);\n\n            gsManifestoRevealMeasureImages(gsManifestoRevealInstance);\n            gsManifestoRevealSetupStagger(gsManifestoRevealInstance);\n        });\n\n        gsManifestoRevealUpdate();\n    }\n\n    function gsManifestoRevealMeasureImages(instance) {\n        instance.items.forEach(item =\u003e {\n\n            if (item.type === 'image') {\n\n                const originalWidth = item.node.style.width;\n                const originalMargin = item.node.style.margin;\n\n                item.node.style.width = 'auto';\n                item.node.style.margin = '0 0.25em';\n\n                const rect = item.node.getBoundingClientRect();\n\n                item.node.style.setProperty('\u002d\u002dtarget-width', `${rect.width}px`);\n\n                item.node.style.width = originalWidth;\n                item.node.style.margin = originalMargin;\n            }\n\n        });\n    }\n\n    function gsManifestoRevealSetupStagger(instance) {\n        let currentTop = -1;\n        let indexInLine = 0;\n\n        instance.nodes.forEach(node =\u003e {\n\n            const rect = node.getBoundingClientRect();\n\n            if (Math.abs(rect.top - currentTop) \u003e 20) {\n                currentTop = rect.top;\n                indexInLine = 0;\n            }\n\n            node.style.transitionDelay = `${indexInLine * 0.15}s`;\n            indexInLine++;\n        });\n    }\n\n    function gsManifestoRevealUpdate() {\n\n        const triggerBottom = window.innerHeight * 0.8;\n\n        gsManifestoRevealInstances.forEach(instance =\u003e {\n\n            instance.items.forEach(item =\u003e {\n\n                const rect = item.node.getBoundingClientRect();\n\n                if (rect.top \u003c triggerBottom) {\n                    item.node.classList.add('revealed');\n                } else {\n                    item.node.classList.remove('revealed');\n                }\n\n            });\n\n        });\n    }\n\n    window.addEventListener('load', gsManifestoRevealInit);\n\n    window.addEventListener('resize', () =\u003e {\n\n        gsManifestoRevealInstances.forEach(instance =\u003e {\n            gsManifestoRevealMeasureImages(instance);\n            gsManifestoRevealSetupStagger(instance);\n        });\n\n        requestAnimationFrame(gsManifestoRevealUpdate);\n    });\n\n    window.addEventListener('scroll', () =\u003e {\n\n        if (!gsManifestoRevealTicking) {\n\n            window.requestAnimationFrame(() =\u003e {\n                gsManifestoRevealUpdate();\n                gsManifestoRevealTicking = false;\n            });\n\n            gsManifestoRevealTicking = true;\n        }\n\n    }, { passive: true });\n\n})();","customJsEnabled":true} -->
<div class="intro-spacer content-wrapper manifesto-container line word image-wrapper image-editor"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-c1c9c98","type":"inner","className":"intro-spacer","localId":"gsbp-c1c9c98"} -->
<div class="intro-spacer"><!-- wp:greenshift-blocks/element {"id":"gsbp-ca691b3","textContent":"Scroll Down ↓","tag":"span","localId":"gsbp-ca691b3"} -->
<span>Scroll Down ↓</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-e6c96ea","type":"inner","className":"content-wrapper","localId":"gsbp-e6c96ea","align":"wide"} -->
<div class="content-wrapper alignwide"><!-- wp:greenshift-blocks/element {"id":"gsbp-03e134f","anchor":"","type":"inner","className":"manifesto-container","localId":"gsbp-03e134f"} -->
<div class="manifesto-container"><!-- wp:greenshift-blocks/element {"id":"gsbp-acc8b01","type":"inner","className":"line","localId":"gsbp-acc8b01"} -->
<div class="line"><!-- wp:greenshift-blocks/element {"id":"gsbp-671f6f7","textContent":"IN","tag":"span","className":"word","localId":"gsbp-671f6f7"} -->
<span class="word">IN</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-919edbb","textContent":"A","tag":"span","className":"word","localId":"gsbp-919edbb"} -->
<span class="word">A</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-66c4b6e","tag":"span","type":"inner","className":"image-wrapper image-editor","localId":"gsbp-66c4b6e"} -->
<span class="image-wrapper image-editor"><!-- wp:greenshift-blocks/element {"id":"gsbp-3d12bed","tag":"img","type":"image","localId":"gsbp-3d12bed","src":"https://picsum.photos/id/338/200/200","alt":"Square","disablelazy":true} -->
<img src="https://picsum.photos/id/338/200/200" alt="Square"/>
<!-- /wp:greenshift-blocks/element --></span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-292c235","textContent":"WORLD","tag":"span","className":"word","localId":"gsbp-292c235"} -->
<span class="word">WORLD</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-998cc79","type":"inner","className":"line","localId":"gsbp-998cc79"} -->
<div class="line"><!-- wp:greenshift-blocks/element {"id":"gsbp-35479fd","textContent":"FULL","tag":"span","className":"word","localId":"gsbp-35479fd"} -->
<span class="word">FULL</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-e19279d","textContent":"OF","tag":"span","className":"word","localId":"gsbp-e19279d"} -->
<span class="word">OF</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-d51e380","textContent":"NOISE,","tag":"span","className":"word","localId":"gsbp-d51e380"} -->
<span class="word">NOISE,</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-17a491b","textContent":"WE","tag":"span","className":"word","localId":"gsbp-17a491b"} -->
<span class="word">WE</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-0a4470f","type":"inner","className":"line","localId":"gsbp-0a4470f"} -->
<div class="line"><!-- wp:greenshift-blocks/element {"id":"gsbp-dbb6cc3","textContent":"HELP","tag":"span","className":"word","localId":"gsbp-dbb6cc3"} -->
<span class="word">HELP</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-db9297a","textContent":"BRANDS","tag":"span","className":"word","localId":"gsbp-db9297a"} -->
<span class="word">BRANDS</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-4fe070e","tag":"span","type":"inner","className":"image-wrapper image-editor","localId":"gsbp-4fe070e"} -->
<span class="image-wrapper image-editor"><!-- wp:greenshift-blocks/element {"id":"gsbp-6c54025","tag":"img","type":"image","localId":"gsbp-6c54025","src":"https://picsum.photos/id/129/300/200","alt":"Landscape"} -->
<img src="https://picsum.photos/id/129/300/200" alt="Landscape" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-5ff292c","textContent":"STAND","tag":"span","className":"word","localId":"gsbp-5ff292c"} -->
<span class="word">STAND</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-221bedc","type":"inner","className":"line","localId":"gsbp-221bedc"} -->
<div class="line"><!-- wp:greenshift-blocks/element {"id":"gsbp-7807f24","textContent":"OUT","tag":"span","className":"word","localId":"gsbp-7807f24"} -->
<span class="word">OUT</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-022d0fe","textContent":"WITH","tag":"span","className":"word","localId":"gsbp-022d0fe"} -->
<span class="word">WITH</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-f44ff34","textContent":"CLEAR","tag":"span","className":"word","localId":"gsbp-f44ff34"} -->
<span class="word">CLEAR</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-a248cb5","textContent":"IDEAS","tag":"span","className":"word","localId":"gsbp-a248cb5"} -->
<span class="word">IDEAS</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-b3c4b0e","type":"inner","className":"line","localId":"gsbp-b3c4b0e"} -->
<div class="line"><!-- wp:greenshift-blocks/element {"id":"gsbp-3ca006b","textContent":"AND","tag":"span","className":"word","localId":"gsbp-3ca006b"} -->
<span class="word">AND</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-85fed5f","tag":"span","type":"inner","className":"image-wrapper image-editor","localId":"gsbp-85fed5f"} -->
<span class="image-wrapper image-editor"><!-- wp:greenshift-blocks/element {"id":"gsbp-575fcbf","tag":"img","type":"image","localId":"gsbp-575fcbf","src":"https://picsum.photos/id/64/300/200","alt":"Landscape"} -->
<img src="https://picsum.photos/id/64/300/200" alt="Landscape" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-0884c10","textContent":"GOOD","tag":"span","className":"word","localId":"gsbp-0884c10"} -->
<span class="word">GOOD</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-45a7982","textContent":"DESIGN","tag":"span","className":"word","localId":"gsbp-45a7982"} -->
<span class="word">DESIGN</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-e5b1869","type":"inner","className":"line","localId":"gsbp-e5b1869"} -->
<div class="line"><!-- wp:greenshift-blocks/element {"id":"gsbp-cb2c9cc","textContent":"THAT","tag":"span","className":"word","localId":"gsbp-cb2c9cc"} -->
<span class="word">THAT</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-a35975b","textContent":"MAKES","tag":"span","className":"word","localId":"gsbp-a35975b"} -->
<span class="word">MAKES</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-57a2dbd","textContent":"AN","tag":"span","className":"word","localId":"gsbp-57a2dbd"} -->
<span class="word">AN</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-5af7274","tag":"span","type":"inner","className":"image-wrapper image-editor","localId":"gsbp-5af7274"} -->
<span class="image-wrapper image-editor"><!-- wp:greenshift-blocks/element {"id":"gsbp-e279492","tag":"img","type":"image","localId":"gsbp-e279492","src":"https://picsum.photos/id/91/200/300","alt":"Portrait"} -->
<img src="https://picsum.photos/id/91/200/300" alt="Portrait" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-40eea30","type":"inner","className":"line","localId":"gsbp-40eea30"} -->
<div class="line"><!-- wp:greenshift-blocks/element {"id":"gsbp-88f8d79","textContent":"IMPACT.","tag":"span","className":"word","localId":"gsbp-88f8d79"} -->
<span class="word">IMPACT.</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

Text reveal effect with Images

Scroll Down ↓
IN A Square WORLD
FULL OF NOISE, WE
HELP BRANDS Landscape STAND
OUT WITH CLEAR IDEAS
AND Landscape GOOD DESIGN
THAT MAKES AN Portrait
IMPACT.