A section "hijacks" vertical scroll input and moves content sideways instead — flipping through cards or a timeline as you scroll.
While the page scrolls vertically (up-down), a specific section "hijacks" the scroll and moves the content sideways instead. So as you scroll DOWN with your mouse or finger, the content inside that section slides from RIGHT to LEFT. It feels like flipping through cards or reading a horizontal timeline. Used a lot on portfolio sites, case study pages, and product showcases.
The section is "pinned" in place on the screen while the user scrolls. As the user scrolls the required distance, the inner content (a row of cards or panels) moves horizontally. The total scrolling distance controls how far the horizontal movement goes — if you have 5 cards each 100vw wide, the section stays pinned for 500vh of scrolling. Typically implemented with GSAP ScrollTrigger's pin and horizontal scrub features.
Use the horizontal scrollbar, swipe sideways on a trackpad, or hold Shift + scroll.
Create a horizontal scroll portfolio section that pins to the screen while the user scrolls vertically. The section should contain 5 project cards, each 80vw wide. As the user scrolls down through 500px of page height, the cards slide horizontally from right to left revealing each project. Use GSAP ScrollTrigger with pin:true and scrub:1 for a smooth tied-to-scroll feel. Each card has a project screenshot (top 60%), project title, brief description, and 'View Project' link. Add a horizontal progress bar at the bottom of the section.