4.0 KiB
Horizontal Scroll Inspiration
Award-winning sites featuring horizontal scroll sections.
Portfolio Style
Studio Freight
URL: https://www.studiofreight.com Award: Awwwards SOTD
What to study:
- Smooth horizontal project gallery
- Project preview on hover
- Seamless transition to project detail
- Mobile fallback handling
Technique: GSAP ScrollTrigger with pin, custom cursor, Locomotive Scroll integration
Lusion
URL: https://lusion.co Award: Awwwards SOTD, FWA
What to study:
- WebGL-enhanced horizontal scroll
- Depth and parallax within sections
- Fluid project transitions
- Sound design integration
Technique: Three.js + GSAP, custom scroll management
Active Theory
URL: https://activetheory.net Award: Multiple Awwwards
What to study:
- Immersive horizontal case studies
- Project preview animations
- Navigation system for long scrolls
- Performance optimization
Technique: Custom scroll engine, WebGL backgrounds
Storytelling Style
Apple AirPods Pro
URL: https://www.apple.com/airpods-pro/ Award: Industry standard
What to study:
- Product features revealed horizontally
- Text and product sync
- Mobile adaptation
- Performance on low-end devices
Technique: Native scroll with transforms, intersection observer
Locomotive
URL: https://locomotive.ca Award: Awwwards SOTD
What to study:
- Smooth-as-butter scroll feel
- Subtle parallax within horizontal
- Typography hierarchy
- Progress indicator design
Technique: Locomotive Scroll library (which they created)
Resn
URL: https://resn.co.nz Award: Multiple FWA, Awwwards
What to study:
- Experimental horizontal navigation
- Project cards with depth
- Playful micro-interactions
- Sound integration
Technique: Custom WebGL, GSAP timelines
Gallery Style
ETQ Amsterdam
URL: https://www.etq-amsterdam.com Award: Awwwards Honorable Mention
What to study:
- Product image gallery horizontal scroll
- Clean, minimal aesthetic
- E-commerce integration
- Quick add-to-cart from gallery
Technique: CSS scroll-snap with enhancements
Moooi
URL: https://www.moooi.com Award: Awwwards SOTD
What to study:
- Furniture showcases
- Image quality and loading
- Horizontal to vertical transitions
- Color theme changes per section
Technique: GSAP ScrollTrigger, lazy loading
Key Patterns Observed
Progress Indicators
Most sites include:
- Dot navigation (clickable)
- Progress bar
- Section counter (01/05)
- Scroll hint on first load
Mobile Handling
Common approaches:
- Stack vertically on mobile (most common)
- Native horizontal scroll with snap
- Reduced animation on mobile
- Touch swipe gestures
Performance
Best practices from these sites:
- Lazy load images per section
- Preload next section
- Use will-change sparingly
- Optimize for 60fps scroll
Implementation Reference
Based on patterns from these sites:
Basic Structure
// Common to most sites
gsap.to('.track', {
x: () => -(trackWidth - windowWidth),
ease: 'none',
scrollTrigger: {
trigger: '.container',
pin: true,
scrub: 1,
end: () => `+=${trackWidth}`
}
});
Parallax Within Horizontal
// Used by Locomotive, Lusion
gsap.to('.section-bg', {
x: -100,
scrollTrigger: {
trigger: '.section',
containerAnimation: scrollTween, // Link to main horizontal
scrub: true
}
});
Progress Indicator
// Common pattern
ScrollTrigger.create({
trigger: '.container',
onUpdate: self => {
progressBar.style.transform = `scaleX(${self.progress})`;
}
});
Questions to Ask
When studying these sites:
- How long is each section visible?
- What triggers the content animations within sections?
- How does the nav/header behave?
- What's the scroll-to-pixel ratio?
- How do they handle browser resize?
- What's the mobile experience?