Dual Vertical Opposite Scroll

{"id":6638,"name":"dual-vertical-opposite-scroll","title":"Dual Vertical Opposite Scroll","date":"2026-02-27 16:29:38","date_formatted":"February 27, 2026","author":{"name":"AK_Developer_25","avatar":"https:\/\/secure.gravatar.com\/avatar\/4895fa216fc2f1ee16e6575899e50eb2388264a879a9791a3ad02c7bed840715?s=60&d=mm&r=g","url":"https:\/\/gallopbiz.in\/ak-dev"},"permalink":"https:\/\/gallopbiz.in\/ak-dev\/template\/dual-vertical-opposite-scroll\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"aafd17","name":"section","parent":0,"children":["70565a","d2693a"],"settings":{"_cssGlobalClasses":["extmnc"]},"label":"Dual Vertical Opposite Scroll"},{"id":"70565a","name":"container","parent":"aafd17","children":["d66aab","19ff40"],"settings":{"_cssGlobalClasses":["jjznfa"]}},{"id":"d66aab","name":"block","parent":"70565a","children":["626822","cf899c","4fa8f8"],"settings":{"_cssGlobalClasses":["gfogtv"]}},{"id":"626822","name":"block","parent":"d66aab","children":["cabac9","7d66a7"],"settings":{"_background":{"image":{"id":6347,"filename":"5d0de26dd79cca5d2a950bae_img-bg-1.webp","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de26dd79cca5d2a950bae_img-bg-1.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de26dd79cca5d2a950bae_img-bg-1.webp"},"position":"center center","repeat":"no-repeat","size":"cover"},"_cssGlobalClasses":["flujgi"]}},{"id":"cabac9","name":"heading","parent":"626822","children":[],"settings":{"text":"Fruit beer","tag":"custom","customTag":"span","_cssGlobalClasses":["mdbmnt"]},"label":"small "},{"id":"7d66a7","name":"heading","parent":"626822","children":[],"settings":{"text":"It gives the beer a fresh, sweet, and tangy taste along with a fruity aroma.","_cssGlobalClasses":["dmshir"]},"label":"Big Heading"},{"id":"cf899c","name":"block","parent":"d66aab","children":["a66b4f"],"settings":{"_cssGlobalClasses":["flujgi"],"_gradient":[],"_alignItems":"center","_background":{"color":{"hex":"#576d25"}}}},{"id":"a66b4f","name":"image","parent":"cf899c","children":[],"settings":{"image":{"id":6627,"filename":"Bottle-back.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/Bottle-back.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/Bottle-back-259x1024.webp"},"_cssGlobalClasses":["itiwec"]}},{"id":"4fa8f8","name":"block","parent":"d66aab","children":["b9df91","95a783"],"settings":{"_background":{"image":{"id":6344,"filename":"5d0de4c341baf21c3809bb5a_img-bg-3.webp","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de4c341baf21c3809bb5a_img-bg-3.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de4c341baf21c3809bb5a_img-bg-3.webp"},"position":"center center","size":"cover","repeat":"no-repeat"},"_cssGlobalClasses":["flujgi"]}},{"id":"b9df91","name":"heading","parent":"4fa8f8","children":[],"settings":{"text":"pleasant orange aroma","tag":"custom","customTag":"span","_cssGlobalClasses":["mdbmnt"]},"label":"small "},{"id":"95a783","name":"heading","parent":"4fa8f8","children":[],"settings":{"text":"A gentle blend of fresh orange a whole malt crisp lager","_cssGlobalClasses":["dmshir"]},"label":"Big Heading"},{"id":"19ff40","name":"block","parent":"70565a","children":["189725","3f7f28","112dee"],"settings":{"_cssGlobalClasses":["oxkpjw"]}},{"id":"189725","name":"block","parent":"19ff40","children":["adfbf5"],"settings":{"_cssGlobalClasses":["helajc"],"_gradient":[],"_background":{"color":{"hex":"#504f54"}},"_alignItems":"center"}},{"id":"adfbf5","name":"image","parent":"189725","children":[],"settings":{"image":{"id":6363,"filename":"5d0de789ac109e6b2cbe7097_lime.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de789ac109e6b2cbe7097_lime.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de789ac109e6b2cbe7097_lime-259x1024.webp"},"_cssGlobalClasses":["itiwec"]},"themeStyles":[]},{"id":"3f7f28","name":"block","parent":"19ff40","children":["28494f","cf58a8"],"settings":{"_cssGlobalClasses":["helajc"],"_background":{"image":{"id":6356,"filename":"5d0de36841baf24bec09ba66_img-bg-2.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de36841baf24bec09ba66_img-bg-2.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de36841baf24bec09ba66_img-bg-2-720x1024.webp"}}}},{"id":"28494f","name":"heading","parent":"3f7f28","children":[],"settings":{"text":"Taste","tag":"custom","customTag":"span","_cssGlobalClasses":["mdbmnt"]},"label":"small "},{"id":"cf58a8","name":"heading","parent":"3f7f28","children":[],"settings":{"text":"Taste: Sweet\u2013tangy, citrusy, and mildly bitter","_cssGlobalClasses":["dmshir"]},"label":"Big Heading"},{"id":"112dee","name":"block","parent":"19ff40","children":["834d41"],"settings":{"_cssGlobalClasses":["helajc"],"_gradient":[],"_alignItems":"center","_background":{"color":{"hex":"#d86b10"}}}},{"id":"834d41","name":"image","parent":"112dee","children":[],"settings":{"image":{"id":6363,"filename":"5d0de789ac109e6b2cbe7097_lime.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de789ac109e6b2cbe7097_lime.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de789ac109e6b2cbe7097_lime-259x1024.webp"},"_cssGlobalClasses":["itiwec"]},"themeStyles":[]},{"id":"d2693a","name":"code","parent":"aafd17","children":[],"settings":{"executeCode":true,"cssCode":".animated__dual-scroll-section {\n height: 400vh; \/* Increase this to make the scroll feel slower\/smoother *\/\n position: relative;\n}\n\n.animated__dual-scroll-container {\n display: flex;\n position: sticky;\n top: 0;\n height: 100vh;\n overflow: hidden;\n width: 100%;\n}\n\n.animated__dual-scroll-left-parent,\n.animated__dual-scroll-right-parent {\n flex: 1;\n height: fit-content; \/* Allows the content to be longer than the screen *\/\n display: flex;\n flex-direction: column;\n}\n\n\/* Optional: Add some spacing or styling to the items *\/\n.animated__dual-scroll-left-child,\n.animated__dual-scroll-right-child {\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid rgba(0,0,0,0.1); \/* To see the boundaries *\/\n}\n\n@media (max-width: 991px) {\n \/* Disable the scroll trap *\/\n .animated__dual-scroll-section {\n height: auto !important; \n }\n\n .animated__dual-scroll-container {\n position: relative !important;\n height: auto !important;\n flex-direction: row; \/* Keeps them next to each other *\/\n overflow: visible !important;\n }\n\n \/* Reset positions so items aren't flying off-screen *\/\n .animated__dual-scroll-left-parent,\n .animated__dual-scroll-right-parent {\n transform: none !important;\n height: auto !important;\n }\n\n .animated__dual-scroll-left-child,\n .animated__dual-scroll-right-child {\n height: auto !important;\n padding: 40px 20px;\n opacity: 1 !important; \/* Ensure they are visible *\/\n transform: scale(1) !important;\n filter: none !important;\n }\n}","javascriptCode":"const section = document.querySelector('.animated__dual-scroll-section');\nconst leftCol = document.querySelector('.animated__dual-scroll-left-parent');\nconst rightCol = document.querySelector('.animated__dual-scroll-right-parent');\nconst leftChildren = document.querySelectorAll('.animated__dual-scroll-left-child');\nconst rightChildren = document.querySelectorAll('.animated__dual-scroll-right-child');\nconst allChildren = [...leftChildren, ...rightChildren];\n\nconst ACTIVE_THRESHOLD = 0.2;\n\nfunction handleDualScroll() {\n if (!section || !leftCol || !rightCol) return;\n\n const windowHeight = window.innerHeight;\n const rect = section.getBoundingClientRect();\n\n if (window.innerWidth > 991 && rect.top 0) {\n const scrollRange = rect.height - windowHeight;\n if (scrollRange {\n const { top, height } = child.getBoundingClientRect();\n const childCenter = top + height \/ 2;\n\n child.classList.toggle(\n 'is-active',\n Math.abs(childCenter - viewportCenter) child.classList.remove('is-active'));\n }\n}\n\nlet ticking = false;\n\nfunction onScroll() {\n if (!ticking) {\n requestAnimationFrame(() => {\n handleDualScroll();\n ticking = false;\n });\n ticking = true;\n }\n}\n\nwindow.addEventListener('scroll', onScroll, { passive: true });\nwindow.addEventListener('resize', handleDualScroll);\nhandleDualScroll();"}}],"templateType":"section","global_classes":[{"id":"extmnc","name":"animated__dual-scroll-section","settings":{"_width":"100%","_height":"200vh"}},{"id":"jjznfa","name":"animated__dual-scroll-container","settings":{"_direction":"row","_width":"100%","_position":"sticky","_direction:tablet_portrait":"column"}},{"id":"gfogtv","name":"animated__dual-scroll-left-parent","settings":{"_width":"50%","_width:tablet_portrait":"100%"}},{"id":"oxkpjw","name":"animated__dual-scroll-right-parent","settings":{"_width":"50%","_width:tablet_portrait":"100%"}},{"id":"flujgi","name":"animated__dual-scroll-left-child","settings":{"_heightMin":"100vh","_gradient":{"applyTo":"overlay"},"_padding":{"top":"20","bottom":"20","right":"20","left":"20"},"_justifyContent":"center","_heightMin:mobile_landscape":"70vh","_alignItems":"flex-start"}},{"id":"helajc","name":"animated__dual-scroll-right-child","settings":{"_heightMin":"100vh","_justifyContent":"center","_padding":{"top":"20","bottom":"20","right":"20","left":"20"},"_gradient":[],"_heightMin:mobile_landscape":"70vh","_alignItems":"flex-start"}},{"id":"mdbmnt","name":"animated2__sub-heading","settings":{"_typography":{"color":{"hex":"#ffffff"},"font-family":"Exo 2","font-size":"28"},"_typography:mobile_portrait":{"font-size":"22"},"_typography:mobile_landscape":{"font-size":"26"}},"modified":1772105946,"user_id":1},{"id":"dmshir","name":"animated2__h2","settings":{"_typography":{"color":{"hex":"#ffffff"},"font-size":"58","font-family":"Autour One","line-height":"1.2"},"_typography:tablet_portrait":{"font-size":"45"},"_typography:mobile_landscape":{"font-size":"38"},"_typography:mobile_portrait":{"font-size":"34"}}},{"id":"itiwec","name":"animated__dual-scroll-child--large-heading_img","settings":{"_interactions":[{"id":"dfcqao","trigger":"enterView","action":"startAnimation","animationType":"zoomIn"}],"_zIndex":"99","_objectFit":"cover","_heightMax":"592","_widthMax":"150"}}]}