Scrolljacking

Scrolljacking occurs when a design team decides the users scroll input is raw material for their animation timeline. They implement it with libraries that map scroll position to animation progress pinning hero sections so they stay in frame while internal elements animate or entire horizontal scrolls trigger as you move down. The page stops acting like a webpage and starts acting like an After Effects composition exported to the browser. Early versions appeared in 2012 with parallax heavy sites like the Nike Better World campaign. By 2018 tools like ScrollMagic and later GSAP ScrollTrigger made it accessible to every studio with position sticky transforms and scroll event listeners dictating every frame. The trend peaked in 2022 and 2023 when nearly every high profile product launch included a scrolljacked intro explaining the problem space before revealing the solution. Brands like Adidas Samsung and numerous fintech startups used it to tell mini stories about innovation with synchronized sound effects particle systems and 3D model rotations. The scroll bar fills from top to bottom not based on content length but based on the duration of the directors cut. Users quickly learned to detect it and developed workarounds like clicking links to jump past the sequence or simply leaving. Performance budgets ballooned. Core web vitals tanked. The entire experience treated the visitor like an audience member strapped into a theater seat.

Scrolljacking is not scroll based micro interactions that respect user agency. The 2026 version of product pages from Arc and Perplexity use scroll to trigger helpful states like revealing deeper spec details exactly when the reader reaches that content without ever locking the viewport. That is smart timing. Scrolljacking is bad timing forced on the reader. It is not the spatial 3D moments that tilt a product model slightly as you scroll past like the Apple AirPods pages in 2026 that add dimension without taking control. Scrolljacking takes control. It is distinct from the variable type axes that shift on scroll to add personality as seen in the Figma 2026 rebrand where headings gain a quirk parameter based on position. Those changes support the content. Scrolljacking replaces the content with the effect. If removing the scroll effect would break the page flow then it is scrolljacking. If the effect supports the flow it is just good design. The difference sits in agency. Helpful scroll effects accelerate decisions. Scrolljacking slows them down on purpose.

Take the 2021 Patagonia Activism campaign site as a concrete example. The page opened with a full screen video background overlaid with text that advanced through four chapters of environmental crisis narrative. Scrolling did not move the page down. It advanced the chapter and triggered new video segments new illustrations of melting ice and new calls to action. Only after the full story played would the actual product catalog appear. Heatmap data later shared in case studies showed 58 percent of visitors never made it to the products. The 2023 landing page for the no code tool Bubble used pinned elements to demonstrate database relations by animating connecting lines as you scrolled through fake app builds. It looked impressive in motion but real user tests revealed confusion about where to click and frustration with the forced pace. A third example is the 2024 rebrand site for Canva that walked through design tool history with animated transitions between Photoshop Illustrator and their own interface. While it garnered shares on Twitter the actual conversion to signups dropped 22 percent compared to their previous simpler page. The Web Design Trends 2026 piece lists scrolljacked intro sequences as part of the kill list because they now read as hostile in a world where instant static heroes and earned motion win. Compare that to how Linear ships their features page with bento blocks that use scroll position for subtle reveals without any pinning or forced narrative. The difference in user sentiment is night and day. Session recordings from Linear show users reaching the CTA in 14 seconds on first visit. Scrolljacked sites averaged 47 seconds with most abandoning.

You should use scrolljacking in exactly zero commercial projects in 2026. The risks far outweigh any perceived storytelling benefit. Do not use it when building marketing sites for SaaS products where clarity and speed are the actual conversion drivers. The pattern increases load time hurts core web vitals and signals to savvy users that you value your vision over their time. Skip it on any page where the audience might be on mobile devices or slower connections because the heavy JavaScript and asset loading creates jank that feels worse on touchscreens with gesture navigation constantly interrupted. The only potential use case is pure experimental art projects or interactive fiction where the linear forced narrative is the entire point like some modern versions of Twine stories exported to web. Even then include an immediate skip button and make the default behavior standard scrolling. Test every scroll decision with five real users outside your team. If they ask why the page fights them or try to refresh to escape delete the code immediately. Instead lean into the patterns that actually ship this year. Use the attention systems of micro interactions like magnetic cursors on primary CTAs that preview intent within 100 pixels. Implement hierarchy systems through evolved bento grids on Vercel that rearrange on scroll but never fight it. Tie variable font changes to scroll for brand expression without dominating the experience. The concrete test is whether a user can scroll to the footer in under five seconds on their first visit. If your design prevents that it fails.

Scrolljacking pretends to invite users on a journey but really locks them in the trunk and that is why it belongs in the 2023 graveyard.