Horizontal scrolling

As previously seen on Apple's iPad page, horizontal scrolling fully engages visitors by using a unique interaction that changes their scrolling experience from vertical to right to left. Scrolling can also be achieved using the up and down arrow keys (spacebar for just scrolling down).

But, here’s the secret — it’s not horizontal scrolling. It’s vertical scrolling with an interaction that moves elements in our viewport as we scroll through our project.

There are five parts to a horizontal scroll effect: the track (this holds everything and serves as the trigger for the horizontal movement interaction), the camera (which is positioned sticky to the viewport as the content scroll through), the frame (which holds all of our content and aligns them horizontally), the content, and the interaction.