horizontal scroll bricks template

horizontal-scroll.json

{"id":159,"name":"horizontal-scroll","title":"Horizontal Scroll","date":"2022-06-27 05:00:18","date_formatted":"June 27, 2022","author":{"name":"david","avatar":"https:\/\/secure.gravatar.com\/avatar\/72f0b6e1ba2e1dfaabcc9a3d3d5708ae?s=60&d=mm&r=g","url":"https:\/\/lib.wplit.com"},"permalink":"https:\/\/lib.wplit.com\/horizontal-scroll-bricks\/template\/horizontal-scroll\/","thumbnail":false,"bundles":[],"tags":[],"type":"section","content":[{"id":"eloddv","name":"container","parent":0,"children":["oypjux"],"settings":{"tag":"section","_alignSelf":"stretch","_alignItems":"center"},"label":"Section"},{"id":"rjnzeo","name":"container","parent":0,"children":["tptemj","ycnffq"],"settings":{"tag":"section","_alignItems":"center","_background":{"color":{"hex":"#e0e0e0","id":"2b4bea"}},"_cssGlobalClasses":["dwwhjb"],"_direction":"row","_direction:tablet_portrait":"column","_cssCustom":"#brxe-rjnzeo.horizontal-scroll-container.brx-container {\n    display:flex;\n    flex-wrap:nowrap;\n    will-change: transform;\n    width: 100%;\n  }\n\n   .brx-body.iframe #brxe-rjnzeo {\n     overflow-x: scroll;\n  }","_width":"100%"},"label":"Section (horizontal scroll)"},{"id":"qzzvft","name":"container","parent":0,"children":["fbhuri"],"settings":{"tag":"section","_alignSelf":"stretch","_alignItems":"center"},"label":"Section"},{"id":"tptemj","name":"code","parent":"rjnzeo","children":[],"settings":{"code":"\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.10.4\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.10.4\/ScrollTrigger.min.js\"><\/script>\t\n\n\n<script>\n  \n  document.addEventListener(\"DOMContentLoaded\",function(e){\n\t\n\tgsap.registerPlugin(ScrollTrigger)\n\t\n\tlet scrollContainers = document.querySelectorAll('.horizontal-scroll-container');\n\n\tScrollTrigger.matchMedia({\n\t\n\t\/\/ desktop\n\t\"(min-width: 992px)\": function() {\n\t\n    scrollContainers.forEach((scrollContainer) => {\n\n      gsap.to(scrollContainer, {\n        x: () => -(scrollContainer.scrollWidth - document.body.clientWidth) + \"px\",\n\n        scrollTrigger: {\n        start: \"center center\",\n        trigger: scrollContainer,\n        invalidateOnRefresh: true,\n        pin: true,\n        scrub: true,\n        anticipatePin: 1,\n        pinSpacing: true\n        }\n      })\n\n    });\t\n    \n  }\n    \n  })\n    \n});\t\n\n\n<\/script>","executeCode":true},"label":"Code (JS)"},{"id":"ycnffq","name":"container","parent":"rjnzeo","children":["boprbk","wuyrtc"],"settings":{"_alignItems":"stretch","_justifyContent":"center","hasLoop":true,"query":{"objectType":"post","posts_per_page":"3"},"_direction":"row","_direction:tablet_portrait":"column","_flexShrink":"0","_height":"100vh","_height:tablet_portrait":"auto"}},{"id":"boprbk","name":"container","parent":"ycnffq","children":[],"settings":{"_background":{"position":"center center","image":{"url":"https:\/\/images.unsplash.com\/photo-1583329550487-0fa300a4cd1a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1288&q=80","external":true,"filename":"photo-1583329550487-0fa300a4cd1a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1288&q=80"}},"_flexBasis":"50%","_flexShrink":"0","_cssGlobalClasses":["dnlnsn"],"_flexBasis:tablet_portrait":"40vh"}},{"id":"wuyrtc","name":"container","parent":"ycnffq","children":["iuyjaz"],"settings":{"_justifyContent":"center","_alignItems":"center","_padding":{"top":10,"unit":{"top":"%","right":"%","bottom":"%","left":"%"},"right":10,"bottom":10,"left":10},"_flexBasis":"50%","_flexShrink":"0"}},{"id":"iuyjaz","name":"text-basic","parent":"wuyrtc","children":[],"settings":{"text":"{post_excerpt}"}},{"id":"oypjux","name":"container","parent":"eloddv","children":["cqiudm","ftklmc"],"settings":{"_padding":{"top":300,"bottom":300},"_alignItems":"center","_typography:tablet_portrait":{"text-align":"center"},"_padding:tablet_portrait":{"right":30,"left":30}}},{"id":"cqiudm","name":"heading","parent":"oypjux","children":[],"settings":{"text":"Scroll down for horizontal scrolling section","tag":"h3"}},{"id":"ftklmc","name":"text-basic","parent":"oypjux","children":[],"settings":{"text":"(above 992px)"}},{"id":"fbhuri","name":"container","parent":"qzzvft","children":["adhlsd"],"settings":{"_padding":{"top":500,"bottom":500},"_alignItems":"center","_padding:tablet_portrait":{"right":30,"left":30}}},{"id":"adhlsd","name":"heading","parent":"fbhuri","children":[],"settings":{"text":"Resume normal page scrolling","tag":"h3"}}],"templateType":"section","global_classes":[{"id":"dwwhjb","name":"horizontal-scroll-container","settings":{"_direction":"row"}},{"id":"dnlnsn","name":"horizontal-scroll-image","settings":[]}]}