Try adding a Code Block
<div class="container tcontainer">
<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://use.typekit.net/skn8ash.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css"/>
<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>
and add this to DESIGN > CUSTOM CSS
/* CSS test code */
.tcontainer {
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;
}
}
