Scroll Fading vs Scrolljacking

Scroll fade is a new design pattern. It refers to an animation that is triggered by scrolling: new elements or content fade in or out once the user scrolls down to a certain point on the page.

Movement (and thus animation) is processed preattentively: the eyes are automatically drawn to it. As a result, incorrectly deployed animations can be highly distracting.

Scroll Fading vs. Scrolljacking

Scroll fading and scrolljacking are two different design patterns that relate to scrolling. The key difference between them is that scroll fading simply triggers an animation when a user scrolls to a particular point on the page, without affecting how the user is able to scroll. In contrast, scrolljacking changes the user’s scroll rate and sometimes the direction of scrolling, overriding the set scroll speed of the operating system.

Scroll fading and scrolljacking can be used together. In the example below, the user’s scroll rate is changed (scrolljacking) and elements on the page fade in upon the user scrolling (scroll fading).