If you’ve ever browsed an Awwwards Site of the Year and felt that addictive, buttery-smooth momentum as you scrolled, you were likely experiencing “Smooth Scroll.” Mastering how to use Locomotive Scroll and GSAP for modern motion websites is the invisible line that separates amateur websites from premium digital experiences.
In this Locomotive Scroll GSAP tutorial, we aren’t just going to move things on the screen. We are going to learn how to hijack the browser’s scroll behavior to create an immersive “Scrollytelling” experience, and how to use tools like Kitstarter.io to make this high-end workflow scalable and profitable.
What is Locomotive Scroll and Why Pair it with GSAP?
Locomotive Scroll is a powerful library that provides “Inertial Scroll”—that feeling of weight and momentum when you use your mouse wheel. However, there is a catch. Because Locomotive “hides” the native scroll bar and moves the content using CSS transforms, GSAP’s ScrollTrigger loses track of where the elements are.
To fix this, we use the scrollerProxy. Think of it as a translator that tells GSAP: “Hey, the user hasn’t actually scrolled the window, but Locomotive just moved the content 500px down, so please fire the animation now.”
Technical Setup: The "ScrollerProxy" Magic
Let’s get our hands dirty. To follow this Locomotive Scroll GSAP tutorial, you need to include the Locomotive CSS and both JS libraries.
The Boilerplate Code
This is the “Golden Snippet” that every creative developer keeps in their notes. It syncs the Locomotive instance with GSAP perfectly.
// 1. Initialize Locomotive Scroll
const scroller = new locomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});
// 2. Tell ScrollTrigger to use Locomotive's proxy
gsap.registerPlugin(ScrollTrigger);
scroller.on("scroll", ScrollTrigger.update);
ScrollTrigger.scrollerProxy("[data-scroll-container]", {
scrollTop(value) {
return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y;
},
getBoundingClientRect() {
return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
},
pinType: document.querySelector("[data-scroll-container]").style.transform ? "transform" : "fixed"
});
// 3. Always refresh ScrollTrigger when Locomotive updates
ScrollTrigger.addEventListener("refresh", () => scroller.update());
ScrollTrigger.refresh();
Expert Tip: Notice the pinType. If your container uses CSS transforms (which Locomotive does), standard position: fixed will break. GSAP’s proxy fixes this by using “transform” pinning.
Building High-End Templates with Kitstarter.io
One of the biggest hurdles in how to use Locomotive Scroll and GSAP for modern motion websites is the setup time. Every project requires the same proxy code, the same CSS resets, and the same container structures.
This is where Kitstarter.io changes the game for freelancers and agencies.
Kitstarter.io allows you to take these complex, code-heavy sections and package them into reusable Elementor or Gutenberg kits.
Rapid Prototyping: Instead of re-writing the proxy logic every time, you can pull a “GSAP + Locomotive Ready” container from your Kitstarter library.
Seamless Integration: Since Kitstarter allows you to inject custom scripts and JSON structures, you can ensure your GSAP timelines are already mapped to the Locomotive attributes (
data-scroll,data-scroll-speed).Scalable Business: You can build a signature “Motion Style” and sell those high-performance templates via Kitstarter, creating a passive income stream from your technical expertise.
Comparison: Smooth Scroll Libraries in 2026
| Feature | Locomotive Scroll | Lenis (by Studio Freight) | Native Scroll |
| Feel | Heavy, Inertial, Cinematic | Lightweight, Modern | Standard |
| Complexity | High (Requires Proxy) | Low (Plug & Play) | None |
| Performance | Resource Intensive | Optimized / High | Perfect |
| Fixed Elements | Hard to manage | Easy | Native |
| Best For | Immersive Portfolios | E-commerce / Content Sites | Minimalist Blogs |
Advanced Techniques: Scrollytelling
Once the proxy is set up, you can use GSAP to trigger animations based on the scroll position calculated by Locomotive.
Example: The Image Reveal
Using the scrub property allows the animation to follow the “momentum” of Locomotive Scroll, creating a truly unified feel.
gsap.to(".portfolio-image", {
scrollTrigger: {
trigger: ".portfolio-image",
scroller: "[data-scroll-container]", // MUST define the scroller
scrub: true,
start: "top bottom",
end: "top center"
},
scale: 1.2,
filter: "blur(0px)",
opacity: 1
});
FAQ: Solving the "Smooth Scroll" Headaches
Q1: Why does my content disappear when I enable Locomotive Scroll? A: This is usually a CSS issue. Locomotive Scroll requires your main container to have a specific structure. Ensure your [data-scroll-container] does not have overflow: hidden on the parent body or html tags in a way that conflicts with the library.
Q2: How does this affect SEO? A: Since Locomotive Scroll moves content within a single container, it doesn’t inherently hurt SEO. However, if your “smooth scroll” makes the page take too long to become interactive (FID/INP metrics), it could impact rankings. Always use a tool like Kitstarter.io to ensure your code is bundled and loaded efficiently.
Q3: Is it mobile-friendly? A: Traditionally, smooth scroll was a nightmare on mobile. However, modern versions of Locomotive allow you to disable smooth scrolling on touch devices while keeping the GSAP animations active. This is often the best “Expert” approach.
Conclusion
Learning how to use Locomotive Scroll and GSAP for modern motion websites is about mastering the “feel” of the web. It is the difference between a tool and an experience.
By combining the cinematic momentum of Locomotive, the surgical precision of GSAP, and the distribution power of Kitstarter.io, you are no longer just a web designer—you are a digital architect.
