A Note on Scrolljacking

The act of disrupting (or hijacking) those expectations about how scrolling works is often portmanteau-ed as scrolljacking. Scrolljacking involves overriding the native scrolling behavior of a webpage—typically with the intention of creating an experience that’s markedly different. For example, instead of a direct, continuous scroll, the page might move in predefined jumps or trigger transitions that are decoupled from the page’s scroll position. This is often (though not always) achieved through the use of JavaScript that listens for scroll events or touch gestures and manually changes, sets, or locks the page scroll.

Sometimes even just altering the speed or easing of scrolling is can have negative effects. Lift Type has done this on their website; they’ve slowed the scroll down and made the easing more pronounced, so that it feels like you’re scrolling through molasses. That effect, when combined with the subtle parallax of the card images, is enough to induce feelings of car-sickness or vertigo in some users—this author included. It’s an otherwise gorgeous website. But the misstep of tinkering with the scroll mechanics has made it hard to appreciate.

While the intent behind scrolljacking might be to create a unique or immersive experience, the result can often be jarring and distracting to users. Scrolljacking is also finicky to execute. Scrolljacked pages tend to be bug-prone, adding to the poor user experience.

Not all scroll-based animations are bad though! It’s possible to create animations and transitions that “piggyback” on the natural flow of scrolling to enhance the user’s experience without disrupting their expectations. Rather than overriding the scroll behavior, it adds layers of interaction that complement it. For instance, as the user scrolls down a page, animations might unfold, elements might fade in, or backgrounds might shift to create a sense of depth.

Take this story about Teenagers from The Pudding. As you scroll through the page, you’ll notice there’s a great deal of complex animation coupled to the scroll position. Hundreds of color-coded characters sprint across the screen and reorganize themselves into different grouping; a horizontal timeline advances at the bottom of the viewport; and explanatory text passes on top of it all. But it’s not disorienting, or nausea-inducing, or frustrating to navigate.

The key difference between these two examples is that the latter respects the user’s control over scrolling. In this approach, users’ inputs are still directly correlated with the movement of the page:

• Scrolling a little moves the page a little.
• Scrolling a lot moves the page a lot.
• Scrolling slowly moves the page slowly.
• Scrolling quickly moves the page quickly.