Prototyping Websites With Both Horizontal and Vertical Scrolling

Multi-directional scroll techniques in Adobe XD

February 1, 2021
Sarah Corner
Designer & Animator

Today we're looking at making our websites more interactive by mixing up the direction the page takes as we scroll. Most notably, we'll be utilizing Adobe XD scroll groups and nesting them from the ground up so that our prototypes can reflect our vision.

We'll be going step-by-step through the chronological order of scroll groups to get this prototype to work, starting from the very bottom of our web page and working our way up. While our tutorial covers vertical-horizontal-vertical scroll group orientations (in that order), this can easily be applied to a webpage that ends on a horizontal scroll rather than vertical. Mixing and reorganizing the sections of the webpage are encouraged to provide a unique interactive experience.

Layered scroll group diagram