{"id":124,"date":"2023-10-23T14:14:08","date_gmt":"2023-10-23T14:14:08","guid":{"rendered":"https:\/\/x-impuls.kp-w.de\/?page_id=124"},"modified":"2023-10-23T14:50:08","modified_gmt":"2023-10-23T14:50:08","slug":"parallax-logo2","status":"publish","type":"page","link":"https:\/\/x-impuls.kp-w.de\/index.php\/parallax-logo2\/","title":{"rendered":"Parallax logo2"},"content":{"rendered":"\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"> <!-- <link rel=\"stylesheet\" href=\"https:\/\/codepen.io\/GreenSock\/pen\/7ba936b34824fefdccfe2c6d9f0b740b.css\">  -->\n<style>\n\n    .panel.align-top {\n    align-items: flex-start;\n    }\n\n    .panel h1 {\n    font-size: 1.8em;\n    color: white;\n    font-weight: 300;\n    margin: 0 auto;\n    }\n    .panel.description {\n    padding-bottom: 60px;\n    }\n    .panel p, .panel li {\n    color: black;\n    font-weight: 400;\n    text-align: left;\n    font-size: 0.8em;\n    line-height: 1.5em;\n    margin: 0.3em 0 1em 0;\n    }\n    .panel p strong, .panel li strong {\n    color: white;\n    font-weight: 400;\n    }\n    .panel p code, .panel li code {\n    background-color: rgba(255,255,255,0.15);\n    padding: 2px 4px;\n    border-radius: 5px;\n    }\n    .panel li {\n    margin: 0;\n    }\n    .gray {\n    background-color: #777;\n    background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, #777,#606060);\n    }\n    .blue {\n    background-color: #2c7ad2;\n    background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, #2c7ad2,#1568c6);\n    }\n    .orange {\n    background-color: #e77614;\n    background-image: radial-gradient(circle at 46% 40%, rgba(228, 228, 228,0.06) 0%, rgba(228, 228, 228,0.06) 13%,transparent 13%, transparent 100%),radial-gradient(circle at 11% 41%, rgba(198, 198, 198,0.06) 0%, rgba(198, 198, 198,0.06) 19%,transparent 19%, transparent 100%),radial-gradient(circle at 52% 23%, rgba(14, 14, 14,0.06) 0%, rgba(14, 14, 14,0.06) 69%,transparent 69%, transparent 100%),radial-gradient(circle at 13% 85%, rgba(148, 148, 148,0.06) 0%, rgba(148, 148, 148,0.06) 44%,transparent 44%, transparent 100%),radial-gradient(circle at 57% 74%, rgba(232, 232, 232,0.06) 0%, rgba(232, 232, 232,0.06) 21%,transparent 21%, transparent 100%),radial-gradient(circle at 59% 54%, rgba(39, 39, 39,0.06) 0%, rgba(39, 39, 39,0.06) 49%,transparent 49%, transparent 100%),radial-gradient(circle at 98% 38%, rgba(157, 157, 157,0.06) 0%, rgba(157, 157, 157,0.06) 24%,transparent 24%, transparent 100%),radial-gradient(circle at 8% 6%, rgba(60, 60, 60,0.06) 0%, rgba(60, 60, 60,0.06) 12%,transparent 12%, transparent 100%),linear-gradient(90deg, #ff7600, #ff7600);\n    }\n\n    .red {\n    background-color: #c82736;\n    background-image: radial-gradient(circle at 19% 90%, rgba(190, 190, 190,0.04) 0%, rgba(190, 190, 190,0.04) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 73% 2%, rgba(78, 78, 78,0.04) 0%, rgba(78, 78, 78,0.04) 94%,transparent 94%, transparent 100%),radial-gradient(circle at 45% 2%, rgba(18, 18, 18,0.04) 0%, rgba(18, 18, 18,0.04) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 76% 60%, rgba(110, 110, 110,0.04) 0%, rgba(110, 110, 110,0.04) 34%,transparent 34%, transparent 100%),radial-gradient(circle at 68% 56%, rgba(246, 246, 246,0.04) 0%, rgba(246, 246, 246,0.04) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 71% 42%, rgba(156, 156, 156,0.04) 0%, rgba(156, 156, 156,0.04) 47%,transparent 47%, transparent 100%),radial-gradient(circle at 46% 82%, rgba(247, 247, 247,0.04) 0%, rgba(247, 247, 247,0.04) 39%,transparent 39%, transparent 100%),radial-gradient(circle at 50% 47%, rgba(209, 209, 209,0.04) 0%, rgba(209, 209, 209,0.04) 45%,transparent 45%, transparent 100%),linear-gradient(90deg, #e53949,#cc2232);\n    }\n\n    .purple {\n    background-color: #8d3dae;\n    background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, #8d3dae,#8d3dae);\n    }\n    .green {\n    background-color: #28a92b;\n    background-image: radial-gradient(circle at 46% 40%, rgba(228, 228, 228,0.06) 0%, rgba(228, 228, 228,0.06) 13%,transparent 13%, transparent 100%),radial-gradient(circle at 11% 41%, rgba(198, 198, 198,0.06) 0%, rgba(198, 198, 198,0.06) 19%,transparent 19%, transparent 100%),radial-gradient(circle at 52% 23%, rgba(14, 14, 14,0.06) 0%, rgba(14, 14, 14,0.06) 69%,transparent 69%, transparent 100%),radial-gradient(circle at 13% 85%, rgba(148, 148, 148,0.06) 0%, rgba(148, 148, 148,0.06) 44%,transparent 44%, transparent 100%),radial-gradient(circle at 57% 74%, rgba(232, 232, 232,0.06) 0%, rgba(232, 232, 232,0.06) 21%,transparent 21%, transparent 100%),radial-gradient(circle at 59% 54%, rgba(39, 39, 39,0.06) 0%, rgba(39, 39, 39,0.06) 49%,transparent 49%, transparent 100%),radial-gradient(circle at 98% 38%, rgba(157, 157, 157,0.06) 0%, rgba(157, 157, 157,0.06) 24%,transparent 24%, transparent 100%),radial-gradient(circle at 8% 6%, rgba(60, 60, 60,0.06) 0%, rgba(60, 60, 60,0.06) 12%,transparent 12%, transparent 100%),linear-gradient(90deg, #28a92b, #10a614);\n    }\n\n    html, body {\n    margin: 0;\n    height: 100%;\n    -webkit-overflow-scrolling: touch;\n    \/* overflow-scrolling: touch; *\/\n    font-family: \"Signika Negative\", sans-serif, Arial;\n    }\n\n    .panel {\n        width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-weight: 600;\n    font-size: 1.5em;\n    text-align: center;\n    color: white;\n    position: relative;\n    box-sizing: border-box;\n    padding: 10px;\n    }\n\n    body {\n    overflow-x: hidden;\n    overflow-y: scroll;\n    }\n\n    h1, h2, p, li {\n    max-width: 800px;\n    }\n\n    \/* HEADER *\/\n    header {\n    position: fixed;\n    top: 0px;\n    left: 0px;\n    padding: 6px 10px 10px 10px;\n    border-bottom-right-radius: 26px;\n    z-index: 100;\n    background-color: rgba(0,0,0,0.5);\n    will-change: transform;\n    }\n\n    \/* HEADINGS *\/\n    .header-section {\n    padding: 0 15px;\n    text-align: center;\n    margin: 40vh auto 50vh;\n    }\n\n    \/* SCROLL DOWN *\/ \n    .scroll-down {\n    position: absolute; \n    bottom: 30px;\n    left: 50%;\n    transform: translate(-50%, 0);\n    color: black;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: 16px;\n    overflow: visible;\n    }\n    .scroll-down .arrow {\n    position: relative;\n    top: -4px;\n    margin: 0 auto;\n    width: 20px;\n    height: 20px;\n    background-image: url(data:image\/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iYmxhY2siIGQ9Ik00ODMuMiwxOTIuMmMtMjAuNS0yMC41LTUzLjUtMjAuOC03My43LTAuNkwyNTcsMzQ0LjFMMTA0LjUsMTkxLjZjLTIwLjItMjAuMi01My4yLTE5LjktNzMuNywwLjYKCWMtMjAuNSwyMC41LTIwLjgsNTMuNS0wLjYsNzMuN2wxOTAsMTkwYzEwLjEsMTAuMSwyMy40LDE1LjEsMzYuOCwxNWMxMy4zLDAuMSwyNi43LTQuOSwzNi44LTE1bDE5MC0xOTAKCUM1MDMuOSwyNDUuNyw1MDMuNywyMTIuNyw0ODMuMiwxOTIuMnoiLz4KPC9zdmc+);\n    background-size: contain;\n    }\n\n    .arrow-right {\n    transform: rotate(-90deg);\n    position: relative;\n    top: -4px;\n    margin: 1rem auto;\n    width: 20px;\n    height: 20px;\n    background-image: url(data:image\/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iYmxhY2siIGQ9Ik00ODMuMiwxOTIuMmMtMjAuNS0yMC41LTUzLjUtMjAuOC03My43LTAuNkwyNTcsMzQ0LjFMMTA0LjUsMTkxLjZjLTIwLjItMjAuMi01My4yLTE5LjktNzMuNywwLjYKCWMtMjAuNSwyMC41LTIwLjgsNTMuNS0wLjYsNzMuN2wxOTAsMTkwYzEwLjEsMTAuMSwyMy40LDE1LjEsMzYuOCwxNWMxMy4zLDAuMSwyNi43LTQuOSwzNi44LTE1bDE5MC0xOTAKCUM1MDMuOSwyNDUuNyw1MDMuNywyMTIuNyw0ODMuMiwxOTIuMnoiLz4KPC9zdmc+);\n    background-size: contain;\n    }\n\n\n\n    body {\n        height: 300vh;\n        background-color: #111;\n        color: white;\n        overflow-x: hidden;\n    }\n\n    h1, h2 {\n        font-weight: 400;\n        max-width: none;\n    }\n\n    .comparisonSection {\n        \/* position: relative; *\/\n        height:1070px;\n        \/* padding-bottom: 56.25%; to maintain aspect ratio (responsive!) *\/\n    }\n    .comparisonImage {\n        width: 100%;\n        height: 100%;\n    }\n    .afterImage {\n        position: absolute;\n        overflow: hidden;\n        top: 0;\n        transform: translate(100%, 0px);\n    }\n    .afterImage img {\n    transform: translate(-100%, 0px);\n    }\n    .comparisonImage img {\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        top: 0;\n    }\n\n<\/style>\n\n<!-- logo style -->\n<style>\n    \/*body {\n      margin: 0;\n      height:2500px;    \n    }\n    *\/\n  \n    \/* section {\n            width: 100%;\n            height: 2000px;\n            margin: auto;\n            background: #e7e2dd;\n            text-align: center;\n    } *\/\n    \n    .container {\n      \/* position: fixed; *\/\n      width: 100%;\n       height:100%;    \n     \n    }\n    \n    video {\n      width: 100%;\n    }\n    \n    .overlay {\n      display: block;\n      position: absolute;\n      \/* position: fixed; *\/\n      \/* position: relative; *\/\n      width: 100%;\n      height: 100%;\n      top: 0;\n    }\n<\/style>\n\n<script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"><\/script>\n<script>\n    $(document).ready(function() {\n      console.log('selector=', document.querySelector(\".comparisonSection\"));\n      if (document.querySelector(\".comparisonSection\") != null) {\n\n            gsap.utils.toArray(\".comparisonSection\").forEach(section => {\n    \t        let tl = gsap.timeline({\n    \t\t\t    scrollTrigger: {\n                        trigger: section,\n                        start: \"top top\",\n                        \/\/ makes the height of the scrolling (while pinning) match the width, thus the speed remains constant (vertical\/horizontal)\n                        end: () => \"+=\" + section.offsetWidth, \n                        scrub: 0.5,\n                        pin: true,\n                        markers: true,\n                        anticipatePin: 1\n                    },\n                    defaults: {ease: \"none\"}\n    \t\t    });\n    \t        \/\/ animate the container one way...\n                tl.fromTo(section.querySelector(\".afterImage\"), { xPercent: 100, x: 0}, {xPercent: 0})\n                \/\/ ...and the image the opposite way (at the same time)\n                .fromTo(section.querySelector(\".afterImage img\"), {xPercent: -100, x: 0}, {xPercent: 0}, 0);\n    \n    \n                \/\/tl.fromTo(section.querySelector(\".logo_mask\"), { xPercent: 100, x: -100}, {xPercent: 0});\n                tl.fromTo(section.querySelector(\".logo_mask\"), { scale: 1, x: 0, y:0}, {scale: \"+=150\", x: -6020, y:-5000});\n            });\n    \n    \n    \n    \n            \n            var s = skrollr.init([\n            smoothScrolling=true,\n            smoothScrollingDuration=5000,\n            \/\/forceHeight=true,\n    \n            ]);\n            console.log('hello');\n            constants: {\n                \/\/fill the box for a \"duration\" of 150% of the viewport (pause for 150%)\n                \/\/adjust for shorter\/longer pause\n                \n                knockout: '1000px',\n                forceHeight=true\n            }\n      }\n\n    });\n\n\n<\/script>\n<script src=\"https:\/\/unpkg.co\/gsap@3\/dist\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/unpkg.com\/gsap@3\/dist\/ScrollTrigger.min.js\"><\/script>\n\n<!-- Logo scripts-->\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/skrollr\/0.6.30\/skrollr.min.js\"><\/script>\n\n<h1 class=\"header-section\">Scroll to see the before\/after<\/h1>\n\n<section class=\"comparisonSection\">\n    <div class=\"container\">\n\n        <video autoplay muted loop id=\"myVideo\">\n            <source src=\"https:\/\/x-impuls.kp-w.de\/parallax\/AdobeStock_203432259_Video_HD_Preview.mov\" type=\"video\/mp4\">\n        <\/video>\n        \n        <svg class=\"overlay\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid slice\">\n            <defs>\n            <mask id=\"knockout\" maskContentUnits=\"objectBoundingBox\">\n                <rect x=\"0\" y=\"0\" width=\"1\" height=\"1\" fill=\"white\"\/>\n                <g fill=\"black\" data-0=\"transform: translate(0.5px,0.5px) scale(0.0004) translate(-49px,-49px);\">\n                \n                    <!-- <g fill=\"black\" \n                data-0=\"transform: translate(0.5px,0.5px) scale(0.0004) translate(-49px,-49px);\"\n                data-200p=\"transform: translate(0.5px,0.5px) scale(0.08) translate(-53px,-49px);\"> -->\n                    <g class=\"logo_mask\" >\n                        <g>\n                            <path d=\"M50.4,30.8c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l5.8-5.8c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9l-5.8,5.8\n                            C51.5,30.6,50.9,30.8,50.4,30.8z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M33,48.2c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l11.6-11.6c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9L34.5,47.6\n                            C34.1,48,33.5,48.2,33,48.2z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M27.2,42.4c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l23.2-23.2c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9\n                            L28.7,41.8C28.3,42.2,27.7,42.4,27.2,42.4z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M21.4,36.6c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l11.6-11.6c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9L22.9,36\n                            C22.5,36.4,21.9,36.6,21.4,36.6z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M9.8,25c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l5.8-5.8c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9l-5.8,5.8\n                            C10.9,24.8,10.3,25,9.8,25z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M4,19.2c-0.1,0-0.3,0-0.4,0c-0.1,0-0.3-0.1-0.4-0.1C3.1,19,3,18.9,2.9,18.9c-0.1-0.1-0.2-0.2-0.3-0.3\n                            c-0.1-0.1-0.2-0.2-0.2-0.3c-0.1-0.1-0.1-0.2-0.2-0.4C2.1,17.8,2,17.7,2,17.5c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4\n                            c0-0.1,0.1-0.3,0.1-0.4c0.1-0.1,0.1-0.2,0.2-0.4c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.1,0.4-0.2\n                            c0.1-0.1,0.2-0.1,0.4-0.1C4.3,15,5,15.2,5.5,15.7c0.1,0.1,0.2,0.2,0.3,0.3c0.1,0.1,0.1,0.2,0.2,0.4C6,16.5,6,16.6,6,16.7\n                            c0,0.1,0,0.3,0,0.4c0,0.1,0,0.3,0,0.4c0,0.1-0.1,0.3-0.1,0.4c-0.1,0.1-0.1,0.2-0.2,0.4c-0.1,0.1-0.2,0.2-0.3,0.3\n                            c-0.1,0.1-0.2,0.2-0.3,0.3C5,18.9,4.9,19,4.8,19.1c-0.1,0.1-0.3,0.1-0.4,0.1C4.3,19.2,4.1,19.2,4,19.2z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M15.6,30.8c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l11.6-11.6c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9\n                            L17.1,30.2C16.7,30.6,16.1,30.8,15.6,30.8z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M56.4,71.2c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9L67.6,55c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9L57.9,70.6\n                            C57.5,71,56.9,71.2,56.4,71.2z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M62,77.2c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l23.2-23.2c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9L63.5,76.6\n                            C63,77,62.5,77.2,62,77.2z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M27.2,88.8c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l69.6-69.6c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9\n                            L28.7,88.2C28.3,88.6,27.7,88.8,27.2,88.8z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M15.6,88.8c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l69.7-69.7c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9\n                            L17.1,88.2C16.7,88.6,16.1,88.8,15.6,88.8z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M4,88.8c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l69.6-69.6c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9L5.5,88.2\n                            C5.1,88.6,4.5,88.8,4,88.8z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M85.2,88.8c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l5.8-5.8c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9l-5.8,5.8\n                            C86.2,88.6,85.7,88.8,85.2,88.8z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M73.6,88.8c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l18.6-18.6c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9L75,88.2\n                            C74.6,88.6,74.1,88.8,73.6,88.8z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M84.1,43.5c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l12.7-12.7c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9\n                            L85.6,42.9C85.2,43.3,84.6,43.5,84.1,43.5z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M67.8,83c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l11.6-11.6c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9L69.2,82.4\n                            C68.8,82.8,68.3,83,67.8,83z\"\/>\n                        <\/g>\n                        <g>\n                            <path d=\"M96.8,88.8c-0.1,0-0.3,0-0.4,0c-0.1,0-0.3-0.1-0.4-0.1c-0.1,0-0.2-0.1-0.4-0.2c-0.1-0.1-0.2-0.2-0.3-0.3\n                            c-0.2-0.2-0.3-0.4-0.4-0.7c-0.1-0.2-0.2-0.5-0.2-0.8c0-0.1,0-0.3,0-0.4c0-0.1,0.1-0.3,0.1-0.4c0.1-0.1,0.1-0.2,0.2-0.4\n                            c0.1-0.1,0.2-0.2,0.2-0.3c0.8-0.8,2.2-0.8,2.9,0c0.1,0.1,0.2,0.2,0.3,0.3c0.1,0.1,0.1,0.2,0.2,0.4c0,0.1,0.1,0.3,0.1,0.4\n                            c0,0.1,0,0.3,0,0.4c0,0.3-0.1,0.5-0.2,0.8c-0.1,0.2-0.3,0.5-0.5,0.7c-0.1,0.1-0.2,0.2-0.3,0.3c-0.1,0.1-0.2,0.1-0.4,0.2\n                            c-0.1,0.1-0.3,0.1-0.4,0.1C97.1,88.8,96.9,88.8,96.8,88.8z\"\/>\n                        <\/g>\n    \n                    <\/g>\n                <\/g>\n            <\/mask>\n            <\/defs>\n            <rect x=\"-150\" y=\"-150\" width=\"400\" height=\"400\" fill=\"white\" mask=\"url(#knockout)\"\/>\n        <\/svg>\n\n\n    <\/div>\n<\/section>\n\n<section class=\"comparisonSection\">\n  <div class=\"comparisonImage beforeImage\">\n    <img decoding=\"async\" src=\"https:\/\/assets.codepen.io\/16327\/before.jpg\" alt=\"before\">\n  <\/div>\n  <div class=\"comparisonImage afterImage\">\n    <img decoding=\"async\" src=\"https:\/\/assets.codepen.io\/16327\/after.jpg\" alt=\"after\">\n  <\/div>\n<\/section>\n\n\n<section class=\"comparisonSection1\">\n    ff\n<\/section>\n\n<h1 class=\"header-section\">What did you think?<\/h1>\n\n<header>\n   <a href=\"https:\/\/greensock.com\/scrolltrigger\">\n     <img loading=\"lazy\" decoding=\"async\" class=\"greensock-icon\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/16327\/scroll-trigger-logo-light.svg\" width=\"200\" height=\"64\" \/>\n  <\/a> \n<\/header><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-124","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/pages\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":4,"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/pages\/124\/revisions"}],"predecessor-version":[{"id":129,"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/pages\/124\/revisions\/129"}],"wp:attachment":[{"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/media?parent=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}