Scrolljacking is unique and visually appealing. It is also often a monumental miscalculation on the web designer’s part. Do its benefits outweigh its drawbacks? It’s better to learn about the pros and cons now than to discover the truth after implementing it in a live environment.
What Is Scrolljacking?
Scrolljacking is a portmanteau of “scroll” and “hijacking” that describes the intentional modification of a website’s scrolling functionality. While web designers might do this in several ways, the most common changes affect scroll speed, direction or evenness.
The parallax effect — a design technique where foreground and background elements move at different speeds — is one of the most common forms of scrolljacking. Oddly enough, it is sometimes called scrollytelling, a blend of scrolling and storytelling. While visuals stay in the same place, the on-screen text moves along with the mouse’s scroll wheel.
Dynamic graphics are just as typical. Objects may rotate, change size or catch the light as someone scrolls. Instead of moving down the page, they effectively stay in the same place. Their motion causes the animation to play, so they determine its speed and consistency.
Scroll-triggered events are similar to dynamic graphics. The difference is that elements do not directly link to the scroll wheel’s motion. Instead, the video, animation or image carousel automatically plays when the visitor reaches a certain point. Whether they move or stay in the same place, those visuals continue playing or looping.
Horizontal scrolljacking is self-explanatory. Websites force visitors to move sideways instead of vertically. Anecdotal evidence suggests web designers are more likely to use it for a product or portfolio page — possibly because they want to show off their inventiveness.
The last form of this technique is scrollbar alteration. Professionals may hide it, change its look, move it or remove it altogether. Regardless of the specifics, their decision affects navigation — which substantially impacts the user experience.
Examples of Websites That Use Scrolljacking
Thousands of platforms use scrolljacking practices. Out of all of them, Apple is the most noticeable. It leverages this technique for almost every one of its releases. For instance, the AirPods Pro 2 page features the parallax effect, scroll-triggered events and dynamic graphics. The goal is to keep people on the page long enough to convince them to buy.
The QI Catalog’s website is an excellent example of horizontal scrolljacking. In addition to moving design elements horizontally instead of vertically, users must tilt their heads sideways to read the on-screen text. If they click on one of the 13 options at the bottom of the screen, they must continue scrolling this way.
Basement is a digital studio, and its website features scroll smoothing, the parallax effect and dynamic animations. Unlike other platforms, it doesn’t abandon its control over scrolling once users navigate away from the homepage. One of the few places where it relinquishes control is its blog.
Baunfire — a Silicon Valley-based digital agency — uses the parallax effect to showcase its featured work, outline its mission and describe its services. It likely uses this technique to enhance users’ perception of its creativity, as is evident by its insistence on customizing the cursor. The only area where it doesn’t leverage scrolljacking is the contact page.
Why Do Users Dislike Websites With Scrolljacking?
Frankly, it seems like most people dislike scrolljacking. Internet users have grown used to widely accepted user interface (UI) decisions like having an “X” symbolize “close” or having scrollbars on the right-hand side of the page. Websites may confuse and frustrate visitors when deviating from the norm.
Scrolljacking’s lack of accessibility is its undoing. Switching things up on users can be disorienting and can taint the user’s perception of the site and even the brand itself. Because emotional connection is one of the main factors that motivates people to become loyal to a brand, evoking negative emotion in users can have a significant impact on a brand’s bottom line.
Although internet users are creatures of habit, they are not altogether averse to change — meaning there is more that many people find wrong with scrolljacking than this one issue. Even if the unexpected modification does not throw them off, scroll fatigue will likely set in. This technique forces people to scroll twice as much as they usually would. Whether they use a trackpad, scroll wheel or their finger, they will grow tired of the excessive movement — endless swiping is only fun on social media sites and dating apps.
Further, research suggests people dislike scrolljacking because it’s inconvenient. Inundating a page with animations, dynamic graphics and movable text makes loading slow. Conversion rates — the percentage of users completing a desired action — drop from 40% to 34% when loading times increase by just one second.
Finally, scrolljacking is disliked by many because of its tendency to lose information. Scrolling speed varies too drastically. Think back to Apple’s product page for the AirPods Pro 2. Even though the font size is enormous, the text rapidly fades away, making it potentially hard to read.
Apple’s product page also highlights the aesthetics issue. Frankly, scroll-triggered elements look odd in many cases. In the “personalized listening” section, the animation seems choppy unless the scrolling speed is perfect. It takes the viewer out of the so-called “scrollytelling” experience. Even Apple, a multitrillion-dollar company, can get it wrong.
The Final Verdict on Scrolljacking
Some companies still use scrolljacking even though it is widely disliked because it helps them make an impression, tell a story and guide users to key takeaways. They assume that, by showcasing their creativity or prioritizing aesthetics, they will reduce bounce rates.
In reality, scrolljacking goes against what many visitors expect from a quality website. Their learned experiences tell them that one tick of the mouse wheel scrolls a certain number of lines and that they can find the scrollbar on the right-hand side of the page. Changing things up for the sake of uniqueness is not always advisable.
People who click on one of your blog posts or product pages have a goal in mind. If they have to increase their time on your website just to scroll instead of completing their task, they will become frustrated and disoriented.
Although scrolljacking can be visually exciting and differentiate your brand from others, taking control away from your website visitors is a monumental miscalculation. Unless you perfect the user experience, you may drive people away instead of encouraging them to stay longer.
Eleanor Hecks is Editor-in-Chief of Designerly Magazine. She specializes in writing on web design and development topics for sites such as Smashing Magazine, freeCodeCamp, and more.
