statquoante

I'm trying to integrate this horizontal scroll into my website. Tried adding the html, css encased in <style> and adding all the necessary script. However it didn't seem to work. Anybody able to shed some light on this ? https://codepen.io/cameronknight/pen/qBNvrRQ <div class="container"> <section data-bgcolor="#bcb8ad" data-textcolor="#032f35"> <div> <h1 data-scroll data-scroll-speed="1"><span>Horizontal</span> <span>scroll</span> <span>section</span></h1> <p data-scroll data-scroll-speed="2" data-scroll-delay="0.2">with GSAP ScrollTrigger & Locomotive Scroll</p> </div> </section> <section id="sectionPin"> <div class="pin-wrap"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2> <img src="https://images.pexels.com/photos/5207262/pexels-photo-5207262.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> <img src="https://images.pexels.com/photos/3371358/pexels-photo-3371358.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> <img src="https://images.pexels.com/photos/3618545/pexels-photo-3618545.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> </div> </section> <section data-bgcolor="#e3857a" data-textcolor="#f1dba7"><img src="https://images.pexels.com/photos/4791474/pexels-photo-4791474.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> <h2 data-scroll data-scroll-speed="1" class="credit"><a href="https://thisisadvantage.com" target="_blank">Made by Advantage</a></h2> </section> </div> <style> :root { --text-color: #111; --bg-color: #b9b3a9; } section:not(#sectionPin) { min-height: 100vh; width: 100%; position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 2rem; padding: 50px 10vw; margin: auto; place-items: center; } img { height: 80vh; width: auto; object-fit: cover; } h1 { font-size: 5rem; line-height: 1; font-weight: 800; margin-bottom: 1rem; position: absolute; top: 10vw; left: 10vw; z-index: 4; overflow-wrap: break-word; hyphens: auto; } @media (max-width: 768px) { h1 { font-size: 16vw; } } h1 span { display: block; } h2 { font-size: 2rem; max-width: 400px; } .credit { font-family: Termina, sans-serif; } .credit a { color: var(--text-color); } * { box-sizing: border-box; } #sectionPin { height: 100vh; overflow: hidden; display: flex; left: 0; background: var(--text-color); color: var(--bg-color); } .pin-wrap { height: 100vh; display: flex; justify-content: flex-start; align-items: center; padding: 50px 10vw; } .pin-wrap > * { min-width: 60vw; padding: 0 5vw; } p { position: absolute; bottom: 10vw; right: 10vw; width: 200px; line-height: 1.5; } </style> <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); const pageContainer = document.querySelector(".container"); /* SMOOTH SCROLL */ const scroller = new LocomotiveScroll({ el: pageContainer, smooth: true }); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: pageContainer.style.transform ? "transform" : "fixed" }); //////////////////////////////////// //////////////////////////////////// window.addEventListener("load", function () { let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; // Pinning and horizontal scrolling gsap.to(".pin-wrap", { scrollTrigger: { scroller: pageContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", pin: true, // anticipatePin: 1, start: "top top", end: pinWrapWidth }, x: -horizontalScrollLength, ease: "none" }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh(); }); </script>