statquoante Posted September 2, 2021 Share Posted September 2, 2021 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> Link to comment
tuanphan Posted September 5, 2021 Share Posted September 5, 2021 Try this into Code Block <div class="container tuan"> <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> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css"/> <link rel="stylesheet" href="https://use.typekit.net/skn8ash.css"/> <style> .tuan 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; } .tuan img { height: 80vh; width: auto; object-fit: cover; } .tuan 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) { .tuan h1 { font-size: 16vw; } } .tuan h1 span { display: block; } .tuan h2 { font-size: 2rem; max-width: 400px; } .credit { font-family: Termina, sans-serif; } .credit a { color: var(--text-color); } .tuan * { 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; } .tuan .pin-wrap > * { min-width: 60vw; padding: 0 5vw; } .tuan 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> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Nick_SquareKicker Posted December 5, 2021 Share Posted December 5, 2021 @statquoante you can do this easily with SquareKicker which abstracts all this custom code for you with options like: select as many sections as you want to scroll horizontally, choose left to right scroll or reverse, choose a flow into screen, fixed background, and finally this is fully optimised for mobile devices. All without having to touch a single line of code! If you only want this single feature, you can uses SquareKicker for a single month and changes will save forever. See tutorial link below/ https://squarekicker.com/letsmakethis/horizontal-scroll Hi, I'm Nick a Co-Founder at squarekicker.com. Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. Pro Extension ● Squarespace Template Store ● Inspiration ● Tutorials ● Resources Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment