You're receiving this email because you wisely signed up at
View this email in your browser

Web Animation Weekly

Scrolljacking, often associated with parallax, has become a dirty word. But what is scrolljacking, and is it really all bad? Motion design on the web is young. Many agencies latch on to the newest techniques to dazzle clients, but industry heavyweights and aspiring leaders also have a tendency to latch onto big opinions about How Things Should Be.

At best: design innovation should propel the web forward while experienced leaders apply the brakes of caution lest we hurt ourselves or our users. At worst: creative trends make portions of the web uninhabitable for users; or would-be heroes bolster their own position by adopting black and white views on new and possibly revolutionary design techniques. For this reason, we must turn to research and facts rather than opinions and fashion to help us think for ourselves.

I've ranted on Twitter (as I am often wont to do) about this twice in as many weeks, which is a good indication there's a conversation to have here. Check out the links below and weigh in on the Slack channel!

Rachel Nabors, Editor in Chief

To get the ball rolling on the scroll-hijacking-slash-storytelling discussion, here's Pleasure to Burn. Its creators at lifeblood weave scroll interactions, illustrations, and background animation with the text of Ray Bradbury's Fahrenheit 451.
Ivana McConnell, Features Editor
Definitions for scrolljacking vary as widely as the plethora of examples available. It can mean any one of the following: All of these mess with scrolling to various degrees but have very different impacts on the user's interaction with the page. That last one is particularly troublesome. Examples seem to indicate that this form of scrolljacking is an attempt to imitate native experiences, replacing swipes and gestures users would normally use to navigate in such a space with buttons that must be clicked. This, ironically, is a throwback to the ancient days of AOL and Apple's Hypercard technology, where content could not overflow, users could not scroll, and displays were always a reliable size. Indeed, we could think of scrolling as the web's first step toward responsive web design: adjusting the document size to fit the content rather than vice versa.

We've grown up with scrolling. Tinkering with its behavior can confuse users. Even infinite scrolling should be avoided in some contexts. (Is infinite scrolling also scrolljacking?) This has lead to people decrying tampering with scrolling in any way for several years. But reading through the comments (and yes, you should always read the comments when it comes to web animation) leads to some interesting insights into how many users--who aren't writing blog posts about web design--behave in the wild.

Scrolljacking opponents claim that the web should be a more stateful, clickable place, replacing scrolling interactions like this one with section links called "steppers." However, in addition to looking suspiciously like scrollBlocking, tracking how many people click through to the end of an experience done with a stepper indicates these experiences have a greater fall off. It makes sense. Clicking requires extra effort and executive function, so fewer users are likely to make it to that final tab. Scrolling, however, is passive and requires minimal effort to see through to the end. This is mentioned in a good post outlining some best practices for performing scroll-based interactions.

Indeed, scrolljacking can be used to powerful effect in data visualization, bringing big picture ideas to the casual reader on their commute, silently scrolling through the biggest changes our world has seen. It is hard to imagine articles like these reducing their interactive visuals to static figures and diagrams while conveying the same information as effectively.

Preliminary research has shown that parallax scrolling "was perceived to be more fun than the no-parallax website. With respect to perceived usability, enjoyment, satisfaction, and visual appeal, there were no differences between the parallax website and the no-parallax website." The study authors go on to caution that parallax can trigger users with vestibular disorders, causing motion sickness.

The vestibular disorder problem seems to apply mostly to the scrollSeeking and possibly scrollTriggering part of this equation. Vestibular disorders are an issue when we talk about web animation, but surprisingly they don't seem to be a hot topic in native app design aside from when iOS 7 hastily added a "reduce motion" toggle. Does this mean people are less sensitive to motion in apps or more vocal when using the web? Or does the web design community care more about accessibility or foster more open discussions?

One possible solution would be to allow users the ability to, as on iOS, turn off or reduce motion. This could possibly be a browser feature, and the (increasingly implemented in Firefox and Chrome) Web Animations API does make it possible for browsers to offer such universal controls. This would let browsers suspend or slow all CSS animations and transitions and Web Animation API-based animations for any site loaded (but would do nothing for JS library-based animations like those made with GreenSock). Plus, the API is written to leave the door open to something like scrollingTimeline objects, which would let us tie animations to scrolling without a third-party library.

So what do you think? Is scrolljacking the big bad wolf at the door? Or does it have practical applications? What are best practices we should be observing? And what has your experience been with your users? Join the conversation and let's figure this out together.
Join the conversation at the Web Animation Weekly Slack!
Psst, did you enjoy this? Web Animation Weekly thrives off submissions from readers like you! Submit a link! Or share with your friends!
Copyright © 2016 Tin Magpie, All rights reserved.

unsubscribe from this list    update subscription preferences