UX

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 Reachdesk.com example below, the user’s scroll rate is changed (scrolljacking) and elements on the page fade in upon the user scrolling (scroll fading).

Although accordions can streamline lengthy content pages and reduce scrolling, they compromise content visibility and raise the cost of interaction. On the desktop, reserve the use of accordions for content-rich pages where users won’t need to access information under multiple accordion sections.

While accordions add a visually rich experience, it is not healthy for a content-rich page. Avoid using accordions when:

1. Users require access to the majority of the content.
2. The page displays minimal visible content.
3. The content is intricate, featuring multiple levels.
4. Effectively chunking the content proves challenging.
5. Prioritizing an uninterrupted reading flow is essential.