The quintessential Awwwards-winning effect. As the user scrolls vertically down the page, this component pins itself to the viewport and translates your scrolling into horizontal movement across a massive flex track, only unlocking vertical scroll when you reach the end.
Live Preview
Horizontal Scroll Pin
Keep scrolling down. The container will pin to the screen and translate your vertical scroll into horizontal movement.
Phase 01: Concept
Every great project begins with a single idea. We explore the boundaries of what is possible before writing a single line of code.
Phase 02: Design
Translating concepts into visual language. We focus on typography, spatial relationships, and motion to create stunning interfaces.
Phase 03: Build
Where design meets engineering. Bringing static pixels to life with butter-smooth animations and robust architecture.
Phase 04: Launch
The final push. Optimizing for performance, accessibility, and SEO before introducing our work to the world.
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { HorizontalScrollPin } from "@/components/creative/horizontal-scroll-pin";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { HorizontalScrollPin } from "@/components/creative/horizontal-scroll-pin";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<HorizontalScrollPin
items{/* value */}
/>
</div>
);
}