Locomotive Infinite Scroll
Design an immersive infinite scroll landing page inspired by Locomotive Scroll v5 and Lenis. Ideal for landing pages imersivas, storytelling digital, portfolios criativos, sites de agências, apresentações de produto premium, one-page narrativas. AI-ready template.
Use case: Landing pages imersivas, Storytelling digital, Portfolios criativos, Sites de agências, Apresentações de produto premium, One-page narrativas
Historical Context
Locomotive Scroll emerged from the Montreal-based creative studio Locomotive around 2019, at a time when the web was rediscovering scroll as a narrative device rather than a mere navigation mechanic. The library gave developers a clean abstraction over smooth scrolling — virtual scroll containers, parallax layers, and scroll-triggered animations — without requiring a physics degree or a week of debugging IntersectionObserver edge cases. What made it stick wasn't just the tech. It was the philosophy: scrolling should feel intentional. Before Locomotive, smooth scroll implementations were either janky hacks (hijacking the wheel event, fighting the browser) or heavyweight frameworks that demanded you restructure your entire DOM. Locomotive found the middle ground — opinionated enough to enforce good defaults, flexible enough to let you art-direct every pixel of the journey. The library's influence is visible across award-winning portfolios and agency sites from 2020 onward. It essentially codified a generation's expectation of what a 'premium' scroll experience feels like. Even as native CSS scroll-driven animations gain traction, Locomotive's design language — that buttery, slightly decoupled momentum — remains the reference point for crafted scrolling.
When to Use
Reach for Locomotive when scroll IS the experience — not just a way to get from section A to section B. Portfolio sites where each project reveal is choreographed. Long-form storytelling where parallax layers build atmosphere. Creative agency homepages that need to feel like a directed sequence, not a document. If your content benefits from controlled pacing and spatial depth, this is your tool. Skip it for dashboards, apps, or anything where users need to scan quickly — hijacked scroll frustrates utility-first interfaces.
Design Principles
- Scroll as narrative device — every scroll position should communicate spatial progress through a story, not just vertical distance
- Momentum with intent — the decoupled smooth scroll should feel like gliding through a curated space, never like fighting the browser or losing control
- Parallax as depth cue, not decoration — layer movement must reinforce visual hierarchy and spatial relationships, not just look cool in a portfolio
- Progressive disclosure through pacing — control the rhythm of content reveals so information lands with impact rather than flooding the viewport
- Respect the exit — always provide clear scroll progress indicators and let users bail to specific sections; a beautiful cage is still a cage
Technical Specs
Colors
Primary
Secondary
Effects
Smooth scroll via Lenis (lerp: 0.1, duration: 1.2), parallax layers com data-scroll-speed (0.1 a 0.8), scroll progress como CSS variable (--progress 0-1), viewport detection com IntersectionObserver, fade-in/slide-up on scroll (translate3d + opacity), staggered reveal (delay incremental 100ms), horizontal scroll sections, scroll-triggered counters, kinetic typography com velocidades diferentes, sticky sections com scroll progress, easing customizado (exponential ease-out)
Light/Dark
✓ Full / ✓ Full
Related
Last synced: 4/1/2026