<!-- wp:greenshift-blocks/element {"id":"gsbp-f34d940","type":"inner","className":"image_before_after","localId":"gsbp-f34d940","styleAttributes":{"display":["flex"],"justifyContent":["center"],"maxWidth":["800px"]},"customJs":"import {\n    animate,\n    motionValue,\n    mapValue,\n    styleEffect,\n    clamp,\n    frame,\n} from \u0022{{PLUGIN_URL}}/libs/motion/motion.js\u0022\n\nconst step = 50\nconst elastic = 0.1\n\ndocument.querySelectorAll(\u0022.image_before_after\u0022).forEach((container) =\u003e {\n    const slider = container.querySelector(\u0022.slider\u0022)\n    const overlay = container.querySelector(\u0022.overlay\u0022)\n    let boundary = container.clientWidth / 2\n    const x = motionValue(0)\n\n    styleEffect(slider, {\n        x,\n        backgroundColor: mapValue(\n            x,\n            [-boundary + 20, -boundary + 60, boundary - 60, boundary - 20],\n            [\n                \u0022rgba(255, 255, 255, 0)\u0022,\n                \u0022rgba(255, 255, 255, 1)\u0022,\n                \u0022rgba(255, 255, 255, 1)\u0022,\n                \u0022rgba(255, 255, 255, 0)\u0022,\n            ]\n        ),\n    })\n\n    styleEffect(overlay, {\n        clipPath: mapValue(\n            x,\n            [-boundary, boundary],\n            [\u0022inset(0% 0% 0% 0%)\u0022, \u0022inset(0% 0% 0% 100%)\u0022]\n        ),\n    })\n\n    function handleKeyDown(event) {\n        if (document.activeElement !== slider) return\n\n        let moveBy = 0\n        if (event.key === \u0022ArrowLeft\u0022) moveBy = -step\n        else if (event.key === \u0022ArrowRight\u0022) moveBy = step\n        else return\n\n        animate(x, clamp(-boundary, boundary, x.get() + moveBy), {\n            type: \u0022spring\u0022,\n            stiffness: 900,\n            damping: 40,\n            velocity: moveBy * 10,\n        })\n    }\n\n    function setupDrag() {\n        let startX = 0\n\n        slider.addEventListener(\u0022pointerdown\u0022, (e) =\u003e {\n            startX = x.get() - e.clientX\n            document.body.style.cursor = \u0022grabbing\u0022\n            slider.style.cursor = \u0022grabbing\u0022\n            slider.classList.add(\u0022active\u0022)\n            slider.setPointerCapture(e.pointerId)\n        })\n\n        slider.addEventListener(\u0022pointermove\u0022, (e) =\u003e {\n            if (!slider.hasPointerCapture(e.pointerId)) return\n\n            let newX = startX + e.clientX\n            if (newX \u003c -boundary) newX = -boundary + (newX + boundary) * elastic\n            else if (newX \u003e boundary) newX = boundary + (newX - boundary) * elastic\n\n            x.set(newX)\n        })\n\n        slider.addEventListener(\u0022pointerup\u0022, (e) =\u003e {\n            if (!slider.hasPointerCapture(e.pointerId)) return\n\n            slider.releasePointerCapture(e.pointerId)\n            document.body.style.cursor = \u0022default\u0022\n            slider.style.cursor = \u0022grab\u0022\n            slider.classList.remove(\u0022active\u0022)\n\n            if (x.get() \u003c -boundary || x.get() \u003e boundary) {\n                const targetX = x.get() \u003c -boundary ? -boundary : boundary\n                animate(x, targetX, {\n                    type: \u0022spring\u0022,\n                    stiffness: 900,\n                    damping: 40,\n                })\n            }\n        })\n    }\n\n    slider.addEventListener(\u0022focus\u0022, () =\u003e {\n        document.addEventListener(\u0022keydown\u0022, handleKeyDown)\n    })\n\n    slider.addEventListener(\u0022blur\u0022, () =\u003e {\n        document.removeEventListener(\u0022keydown\u0022, handleKeyDown)\n    })\n\n    window.addEventListener(\u0022resize\u0022, () =\u003e {\n        boundary = container.clientWidth / 2\n        x.set(clamp(-boundary, boundary, x.get()))\n    })\n\n    setupDrag()\n})","customJsEnabled":true,"metadata":{"name":"Section Comparison"}} -->
<div class="image_before_after gsbp-f34d940"><!-- wp:greenshift-blocks/element {"id":"gsbp-7e39115","anchor":"","type":"inner","localId":"gsbp-7e39115","styleAttributes":{"position":["relative"],"display":["flex"],"justifyContent":["center"],"maxWidth":["100%"]},"metadata":{"name":"Comparison Container"}} -->
<div class="gsbp-7e39115"><!-- wp:greenshift-blocks/element {"id":"gsbp-9b4196f","dynamicGClasses":[{"value":"gsbp-9b4196f-responsive","type":"local","label":"gsbp-9b4196f-responsive","localed":false,"css":"@media (max-width: 500px){.gsbp-9b4196f{height:200px;}}","attributes":[],"originalID":"gsbp-9b4196f","originalBlock":"greenshift-blocks/element","selectors":[]}],"type":"inner","className":"gsbp-9b4196f gsbp-9b4196f-responsive","localId":"gsbp-9b4196f","styleAttributes":{"position":["relative"],"backgroundColor":["#0b1011"],"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#1d2628"],"borderRadius":["12px"],"overflow":["hidden"],"aspectRatio":["16/9"],"height":["500px",null,null,"300px"]},"metadata":{"name":"Image Container"}} -->
<div class="gsbp-9b4196f gsbp-9b4196f-responsive gsbp-9b4196f"><!-- wp:greenshift-blocks/element {"id":"gsbp-540a75a","tag":"img","className":"gsbp-540a75a","localId":"gsbp-540a75a","src":"https://greenshift.wpsoul.net/wp-content/uploads/2025/06/carblue.webp","alt":"","mediaid":4708,"originalWidth":1024,"originalHeight":625,"styleAttributes":{"position":["absolute"],"width":["100%"],"height":["100%"],"objectFit":["cover"],"willChange":["clip-path"]},"metadata":{"name":"Image Left"}} -->
<img class="gsbp-540a75a gsbp-540a75a" src="https://greenshift.wpsoul.net/wp-content/uploads/2025/06/carblue.webp" alt="" width="1024" height="625" loading="lazy"/>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-bcb3806","anchor":"","tag":"img","className":"gsbp-bcb3806 overlay","localId":"gsbp-bcb3806","src":"https://greenshift.wpsoul.net/wp-content/uploads/2025/06/carred.webp","alt":"","mediaid":4710,"originalWidth":1536,"originalHeight":1024,"styleAttributes":{"position":["absolute"],"width":["100%"],"height":["100%"],"objectFit":["cover"],"willChange":["clip-path"],"top":["0"],"left":["0"]},"customJs":"","customJsEnabled":true,"metadata":{"name":"Image right"}} -->
<img class="gsbp-bcb3806 overlay gsbp-bcb3806" src="https://greenshift.wpsoul.net/wp-content/uploads/2025/06/carred.webp" alt="" width="1536" height="1024" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-57dcae9","anchor":"","type":"inner","className":"slider","localId":"gsbp-57dcae9","dynamicAttributes":[{"name":"tabindex","value":"0"}],"styleAttributes":{"position":["absolute"],"top":["0"],"bottom":["0"],"width":["2px"],"backgroundColor":["#ffffff"],"cursor":["grab"],"left":["50%"],"transform":["translateX(-50%)"],"filter":["drop-shadow(2px 0 3px rgba(0, 0, 0, 0.4))"],"willChange":["transform, background-color"]},"metadata":{"name":"Drag SVG Container"}} -->
<div class="slider gsbp-57dcae9" tabindex="0"><!-- wp:greenshift-blocks/element {"id":"gsbp-7789b05","type":"inner","className":"handle","localId":"gsbp-7789b05","styleAttributes":{"position":["absolute"],"top":["50%"],"left":["50%"],"transform":["translate(-50%, -50%)"],"width":["40px"],"height":["40px"],"backgroundColor":["#ffffff"],"borderRadius":["50%"],"display":["flex"],"alignItems":["center"],"justifyContent":["center"],"color":["#0f1115"],"cursor":["grab"],"touchAction":["none"]}} -->
<div class="handle gsbp-7789b05"><!-- wp:greenshift-blocks/element {"id":"gsbp-bb61fd8","tag":"svg","icon":{"icon":{"svg":"\u003csvg width=\u002224\u0022 height=\u002224\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00222\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\u003cpath d=\u0022m18 8 4 4-4 4\u0022 /\u003e\u003cpath d=\u0022m6 8-4 4 4 4\u0022 /\u003e\u003cpath d=\u0022M8 12h.01\u0022 /\u003e\u003cpath d=\u0022M12 12h.01\u0022 /\u003e\u003cpath d=\u0022M16 12h.01\u0022 /\u003e\u003c/svg\u003e","image":""},"fill":"currentColor","type":"svg"},"localId":"gsbp-bb61fd8","styleAttributes":{"width":["24px"],"height":["24px"]}} -->
<svg viewBox="0 0 24 24" width="24" height="24" class="gsbp-bb61fd8"><path d="m18 8 4 4-4 4"/><path d="m6 8-4 4 4 4"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-b23f7c0","textContent":"If you have several comparison blocks on page, please remove Custom JS in all Comparison Sections except first one on page","localId":"gsbp-b23f7c0","styleAttributes":{"hideOnFrontend_Extra":true}} -->
<div class="gsbp-b23f7c0">If you have several comparison blocks on page, please remove Custom JS in all Comparison Sections except first one on page</div>
<!-- /wp:greenshift-blocks/element -->

Copy code