Learn how to create a smooth horizontal scrolling section in Bricks Builder using GSAP ScrollTrigger. In this step-by-step tutorial, I’ll show you how to build a pinned horizontal scroll effect, animate content as users scroll, and create modern website interactions without additional plugins.
Timestamps:
- 0:00 Intro / Demo
- 0:46 Page Set up & CSS Classes
- 5:00 Add GSAP Code
GSAP Code
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
const sections = gsap.utils.toArray(".side-scroll-card");
gsap.to(sections, {
xPercent: -100 * (sections.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".side-scroll-container",
pin: true,
scrub: 1,
snap: 1 / (sections.length - 1),
end: () => "+=" + (
document.querySelector(".side-scroll-container").scrollWidth - window.innerWidth),
//markers: true
}
});
</script>
