Locomotive Scroll

What Is Locomotive Scroll?

Locomotive Scroll is a lightweight JavaScript library that adds smooth scrolling and scroll-triggered animation to websites. It intercepts the browser's native scroll behavior and replaces it with an eased, momentum-based scroll, then exposes the scroll position so developers can detect when elements enter the viewport and animate them accordingly. The result is the fluid, polished feel you associate with high-end agency and portfolio sites, where sections glide into place and elements reveal, fade, or move at different speeds as you scroll.

The library was created by Locomotive, a Montreal-based digital agency, and released as an open-source project. It became popular in the design and creative-development community because it makes a particular aesthetic, the smooth-scrolling, parallax-rich "awwwards" look, achievable with a small, focused dependency rather than a sprawling custom build. It is most commonly seen on marketing sites, design studios, product launches, and portfolios where motion and feel are central to the brand.

It is important to be precise about what Locomotive Scroll is and is not. It is a front-end JavaScript library that runs in the visitor's browser, not a framework, a page builder, or a hosted service. It does not manage content, generate pages, or provide a back end. Its single job is to control the scroll experience and provide hooks for animating elements based on scroll position. Developers typically pair it with their own CSS, or with an animation library, to define what actually happens as elements scroll into view.

A useful way to frame Locomotive Scroll is as a specialist tool in the broader category of scroll and animation libraries. Where a general-purpose animation engine can animate anything on a timeline, Locomotive Scroll concentrates on the scroll axis specifically: smoothing it, virtualizing it, and turning scroll progress into a stream of data that drives motion. That narrow focus is exactly why it is reached for so often when a team wants the smooth-scroll feel without writing the intricate, easily buggy code that native smooth scrolling and intersection detection would otherwise require by hand.

How Locomotive Scroll Works

Under the hood, Locomotive Scroll typically replaces native scrolling with a technique often called "virtual" or "smooth" scrolling. Instead of letting the browser scroll the document normally, the library captures wheel and touch input, calculates an eased target position, and then translates a container element using CSS transforms to simulate scrolling. Because the movement is driven by interpolation between the current and target positions, the scroll feels weighted and smooth rather than instantaneous. The library reads input on each animation frame and updates the transform, producing the characteristic momentum effect.

The second half of the library is its detection and animation system. Developers mark elements in their HTML with a data-scroll attribute, and Locomotive Scroll watches those elements as the page scrolls. When an element enters the viewport, the library adds an is-inview class, which developers hook into with CSS to trigger transitions. Additional data attributes refine the behavior: data-scroll-speed controls parallax by making an element move faster or slower than the scroll, data-scroll-direction sets the axis of that movement, data-scroll-delay staggers the effect, and data-scroll-class customizes the class that gets applied. This attribute-driven approach means much of the motion can be configured directly in the markup.

To make this work, the library expects a particular DOM structure. There is usually a scroll container, conventionally marked with data-scroll-container, that wraps the scrollable content. Locomotive Scroll initializes against this container and manages its transform. On initialization, developers create an instance, often written as new LocomotiveScroll({ el, smooth: true }), and the library takes over from there, recalculating dimensions on resize and exposing methods to update or destroy the instance.

Because Locomotive Scroll only handles the scroll axis and viewport detection, it is frequently combined with a dedicated animation engine for richer motion. A common pattern is to use Locomotive Scroll for smooth scrolling and scroll position, then drive complex, timeline-based animations with another library, synchronizing the two so that scroll progress scrubs an animation. This composition is why you will often find Locomotive Scroll loaded alongside other motion libraries rather than on its own.

It is worth understanding the trade-off this architecture introduces. By taking scrolling away from the browser and simulating it with transforms, Locomotive Scroll gains precise control over feel and timing, but it also takes on responsibility for things the browser normally handles for free: anchor links, the scrollbar, keyboard navigation, and accessibility behaviors all have to be accounted for. Well-built implementations handle these carefully; rushed ones can feel broken on keyboards or assistive technology. This is the central tension of all hijacked-scroll libraries, and it is the main reason their use is a deliberate design decision rather than a default.

How to Tell if a Website Uses Locomotive Scroll

Locomotive Scroll leaves distinctive fingerprints in the HTML and in network requests. Because StackOptic analyzes a URL from the server side, it inspects the same raw markup and asset references you can examine manually with browser tools or curl.

Data attributes in the HTML. The strongest and most accessible signal is the family of data-scroll attributes. Look for data-scroll-container on a wrapping element and data-scroll on individual elements, often accompanied by data-scroll-speed, data-scroll-direction, or data-scroll-section. This naming is specific to Locomotive Scroll and is a reliable tell when present in the page source.

The is-inview class. As elements scroll into view, Locomotive Scroll applies an is-inview class. Seeing this class in the live DOM, especially combined with data-scroll attributes, strongly indicates the library. There is also typically a class like has-scroll-smooth added to the html element when smooth scrolling is active.

The script file. Sites frequently load the library from a CDN such as jsDelivr or unpkg, with a URL containing locomotive-scroll (for example a path ending in locomotive-scroll.min.js), and a matching stylesheet locomotive-scroll.css. A request to a URL containing locomotive-scroll is a clear signal.

The CSS class on the scrollbar. The library renders its own custom scrollbar element with a recognizable class such as c-scrollbar. Spotting that element in the inspected DOM is another confirming clue.

Here is how to check each signal yourself:

Method	What to do	What Locomotive Scroll reveals
View Source	Right-click and "View Page Source"	data-scroll-container, data-scroll, and locomotive-scroll script/stylesheet references
Browser DevTools (Elements)	Inspect the HTML element and scroll the page	has-scroll-smooth on html, is-inview classes appearing, the c-scrollbar element
Browser DevTools (Network)	Filter the Network tab by "scroll" or "locomotive"	A request to a locomotive-scroll.min.js file and its CSS
Console	Type LocomotiveScroll and press Enter	If the global is defined, the library is loaded
Wappalyzer	Run the extension on the live page	May identify "Locomotive Scroll" under JavaScript libraries

A quick command-line check is curl -s https://example.com | grep -i "data-scroll-container" or curl -s https://example.com | grep -i "locomotive-scroll". A match on either is strong evidence the site uses the library.

A caveat applies to detection in general: when a library is bundled into a site's compiled JavaScript by a build tool, its individual filename can disappear, replaced by a hashed bundle name. In that situation the script-URL signal vanishes. Locomotive Scroll is somewhat easier than most bundled libraries to detect anyway, because its behavior depends on data-scroll attributes and the classes it injects, and those structural markers remain in the HTML even when the script itself is bundled. Still, if a site has been built so that the markup is generated dynamically and the attributes are stripped or renamed, detection becomes harder and you may have to rely on observing the runtime behavior, the telltale smooth, eased scroll and the custom scrollbar, rather than a definitive code signature. For a fuller methodology, see our guides on how to check what javascript libraries a website uses and how to find out what technology a website uses.

Key Features

• Smooth, momentum-based scrolling. Replaces native scroll with an eased, weighted feel that defines the library's signature aesthetic.
• Scroll-triggered detection. Automatically applies an is-inview class to elements as they enter the viewport, providing a simple hook for reveal animations.
• Parallax via data attributes. data-scroll-speed and data-scroll-direction let elements move at different rates relative to the scroll for layered, parallax effects.
• Markup-driven configuration. Much of the behavior is set through HTML data attributes rather than imperative code, keeping implementation declarative.
• Lightweight and focused. A small dependency dedicated to scroll behavior, rather than a heavyweight framework.
• Composable with animation engines. Designed to pair cleanly with dedicated motion libraries for advanced, timeline-based effects.
• Custom scrollbar. Renders its own scrollbar element so the smooth-scroll experience feels consistent across browsers.

Pros and Cons

Pros

• Delivers a premium, polished scroll feel with relatively little code.
• Declarative data attributes make basic reveals and parallax fast to implement.
• Small and focused, so it adds modest weight compared with full frameworks.
• Pairs well with other animation libraries for sophisticated motion.

Cons

• Hijacking native scroll can introduce accessibility and usability issues if not handled carefully, affecting keyboard users and assistive technology.
• Custom scroll can feel laggy on low-powered devices or conflict with browser features like native anchor jumps.
• Requires a specific DOM structure and careful recalculation on resize or dynamic content changes.
• The smooth-scroll trend is polarizing; some users and clients prefer native scrolling for familiarity and performance.

Locomotive Scroll vs Alternatives

Locomotive Scroll sits among several libraries that handle scroll-based motion, each with a different emphasis. The table below compares common options.

Library	Primary focus	Scroll hijacking	Best for
Locomotive Scroll	Smooth scrolling plus scroll detection	Yes (virtual scroll)	Agency and portfolio sites wanting a premium smooth-scroll feel
GSAP ScrollTrigger	Timeline animation tied to scroll	No (works with native scroll)	Complex, scrubbed scroll animations and pinning
AOS (Animate On Scroll)	Simple entrance animations on scroll	No	Quick reveal effects with minimal setup
Lenis	Smooth scrolling only	Yes (virtual scroll)	A modern, lightweight smooth-scroll layer without built-in detection
Native CSS scroll-behavior	Smooth anchor scrolling	No	Basic smooth jumps without a library

For sophisticated, timeline-based motion rather than the smooth-scroll feel itself, a full animation engine is the better tool; see our profile of GSAP, whose ScrollTrigger plugin is frequently paired with or used instead of Locomotive Scroll. Locomotive Scroll is typically chosen when the smooth, momentum scroll is the desired effect, while GSAP and similar engines are chosen when the priority is animating arbitrary properties precisely along the scroll. Notably, the Locomotive team later released Lenis, a smaller library focused purely on smooth scrolling, which some projects now adopt in place of the original.

Use Cases

Locomotive Scroll is most at home on design-led websites where motion is part of the brand. Digital agencies use it on their own portfolios and on client marketing sites to create the smooth, parallax-rich experiences that win design awards and signal craft. Product launch pages use it to guide visitors through a narrative, revealing features and visuals as they scroll. Photographers, studios, and creative professionals use it on portfolios to make their work feel cinematic.

It also appears on campaign microsites, event pages, and editorial "scrollytelling" features where the scroll itself is the primary interaction. In each case the common thread is that the team has decided the feel of scrolling, and the choreography of elements as you move through the page, is worth the implementation effort and the trade-offs that come with replacing native scroll.

Consider a few concrete scenarios. A branding agency rebuilding its homepage might use Locomotive Scroll so that case-study thumbnails drift in at varying speeds and section headings slide into place, reinforcing a sense of polish that mirrors the work they sell. A consumer-hardware company launching a flagship product might build a long-form scroll page where the device rotates and features annotate themselves as the visitor descends, using Locomotive Scroll for the smooth base and an animation engine for the choreography. A photographer might apply gentle parallax to a grid of images so the portfolio feels alive without distracting from the work.

From a technology-research and competitive-analysis perspective, detecting Locomotive Scroll on a site is a meaningful signal. It strongly suggests a design-conscious team, often an agency or a brand that invests in front-end craft, and it indicates a custom-built front end rather than an off-the-shelf template. For vendors selling to design-led organizations, or for analysts profiling how sophisticated a prospect's web presence is, that is useful context, and it is exactly the kind of insight an automated detection scan surfaces in seconds. To connect a finding like this to wider research, our guide on what technographics are and using tech-stack data to qualify leads explains how front-end signals feed into qualification.

Frequently Asked Questions

Is Locomotive Scroll free to use?

Yes. Locomotive Scroll is an open-source library released by the agency Locomotive, and it is free to include in projects. As with any open-source dependency, you should review its current license terms in the official repository for the specific version you adopt, but there is no licensing fee to use it on a website. Its open availability is part of why it spread so widely in the creative-development community.

Does Locomotive Scroll hurt SEO or accessibility?

It can if implemented carelessly. Because the library replaces native scrolling, it takes on responsibility for behaviors the browser normally provides, including keyboard scrolling, anchor links, and how assistive technology moves through a page. A thoughtful implementation handles these, but a rushed one can create real usability problems for keyboard and screen-reader users. For SEO, the content is still in the HTML, so it is generally crawlable, but heavy scroll-driven JavaScript can affect performance, which indirectly matters. The right approach is to test thoroughly with a keyboard and assistive technology. Our guide on how to make your website load faster covers the performance side.

How can I tell if a site uses Locomotive Scroll versus another smooth-scroll library?

Inspect the page source and the live DOM. Locomotive Scroll uses the distinctive data-scroll, data-scroll-container, and data-scroll-speed attributes, applies an is-inview class to elements in view, and adds has-scroll-smooth to the html element along with a c-scrollbar element. A newer sibling library, Lenis, smooths scrolling but does not use those data attributes or the is-inview system, so the presence of the data-scroll family is what distinguishes Locomotive Scroll specifically.

Can Locomotive Scroll be used with React or Vue?

Yes, though it requires care. Because the library manages the DOM and scroll directly, integrating it into a component framework means initializing it after the relevant content has rendered and cleaning it up when components unmount, as well as updating it when the page height changes. Community wrappers and patterns exist for this, and developers often combine it with a framework-friendly animation approach. If you are determining a site's framework alongside its scroll library, see how to check if a website uses React, Vue, or Angular.

Why do some sites feel "laggy" with smooth scrolling?

The eased, virtual scroll Locomotive Scroll provides requires recalculating positions and updating transforms on every animation frame. On low-powered devices, very long pages, or pages with many heavy elements, that work can cause the scroll to feel less responsive than native scrolling. The effect is a deliberate aesthetic choice, but it has a performance cost, which is why some teams reserve it for sites where the feel justifies the trade-off and optimize carefully elsewhere.

Want to identify Locomotive Scroll and the rest of a site's stack automatically? Run any URL through StackOptic at https://stackoptic.com.