Scroll vertically through the section below. The content moves horizontally — like Apple's chip showcase. Each panel takes up a full "scroll length".
↓ Scroll down to enter horizontal section
You're scrolling vertically, but the content moves left. The plugin maps your vertical scroll position to a horizontal translation with smooth easing.
Pure vanilla JS. Uses sticky positioning and scroll event listeners with requestAnimationFrame. Works in every browser that supports CSS sticky.
The cyan bar at the bottom shows how far through the horizontal section you are. It's configurable and can be hidden entirely.
Drop the script tag in Code Injection. Add data-anavo-hscroll to any section. The plugin handles everything else automatically.
You've exited the horizontal scroll section. Vertical scrolling resumes normally. Add as many horizontal scroll sections as you like on the same page.