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>