{"id":130,"date":"2023-10-23T15:27:44","date_gmt":"2023-10-23T15:27:44","guid":{"rendered":"https:\/\/x-impuls.kp-w.de\/?page_id=130"},"modified":"2023-10-23T15:27:44","modified_gmt":"2023-10-23T15:27:44","slug":"scrolltrigger-image","status":"publish","type":"page","link":"https:\/\/x-impuls.kp-w.de\/index.php\/scrolltrigger-image\/","title":{"rendered":"Scrolltrigger-image"},"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\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        \n        \/* padding-bottom: 100%; to maintain aspect ratio (responsive!) *\/\n        height:900px;\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<script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"><\/script>\n<script>\n    $(document).ready(function() {\n\n        gsap.utils.toArray(\".comparisonSection\").forEach(section => {\n\t        let tl = gsap.timeline({\n\t\t\t    scrollTrigger: {\n\t\t\t\ttrigger: section,\n\t\t\t\tstart: \"center center\",\n                \/\/ makes the height of the scrolling (while pinning) match the width, thus the speed remains constant (vertical\/horizontal)\n\t\t\t\tend: () => \"+=\" + section.offsetWidth, \n\t\t\t\tscrub: true,\n\t\t\t\tpin: true,\n                markers: true,\n                anticipatePin: 1\n\t\t\t},\n\t\t\tdefaults: {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})\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\n<h1 class=\"header-section\">Scroll to see the before\/after<\/h1>\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<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-130","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/pages\/130","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=130"}],"version-history":[{"count":2,"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/pages\/130\/revisions"}],"predecessor-version":[{"id":178,"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/pages\/130\/revisions\/178"}],"wp:attachment":[{"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/media?parent=130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}