So if you follow along in the video, I refer to this blog post for you to either enter code at certain points into the HTML widget or in the Custom CSS option inside the main container, so below is everything you will need!
The css code used in the Main Container that houses the horizontal inner containers.
This is put into the Custom CSS tab under Advanced Settings of the main container:
.horizontal-parent{
transition: none;
overscroll-behavior: none;
}
The GSAP script used to create the horizontal effect.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
let hcontainer = gsap.utils.toArray(".horizontal-child");
gsap.to ( hcontainer, {
xPercent: -100 * ( hcontainer.length - 1 ),
ease: "none",
scrollTrigger: {
trigger: ".horizontal-parent",
pin: true,
markers:false,
scrub: 1,
snap: {
snapTo: 1 / ( hcontainer.length - 1 ),
duration: 0.05
},
end: "+=5000",
}
});
</script>
