This is such a good example. I love this.
scrolljacking, like everything else, can be good or bad. it's just really, really easy to mess up. but when it works, it's great.
case in point: https://getbeagle.co/ is awesome.
Couldn't disagree more. Beagle's scroll jack is frustrating and distracting. To the point that it's aggravating.
I think in Beagle's case, it's pretty much like they have a slideshow whose "previous" and "next" actions happen to be mapped to "scroll up" and "scroll down".
So it's like repurposing the mouse movement as "look up and down" in a FPS. You're not moving a cursor at all, so there's no possible confusion.
Bad scrolljacking is when things are still scrolling, but they just scroll slightly differently from usual. So basically, you want to avoid the uncanny valley of scrolljacking…
Try clicking on the Sign Up button.
Hahaha. That's hilariously jarring.
Thanks for the hat tip.
For Beagle, we just launched our public beta, so wanted a bit of a splash. You don't get more splashy these days than having a controversial scrolly website.
I'm still on the fence about the whole thing. Yeah, it kinda works, yeah, it's a bit annoying. But for the job the page was built to perform, it's exceeding all expectations. If the conversation rate tanked I would be concerned and probably line up my sights on the scrolling. Am I going to use it for every project? Probably not. It was appropriate for the strategy in the case of Beagle.
A small part of me enjoys the chaos and turmoil it has brought to some web designers out there.
A big part of me thinks life is too short to be concerned.
Interesting that you say it's performing well. Makes you wonder if non-designers regard scrolljacking with such disdain. Doubtful.
I'd love actually share some of the metrics publically. I'll see if can do that. In the mean time:
- Performed well in user tests.
- Only negative feedback has been from web designers (but that's all we do, right?)
- Insanely positive feedback from non-designers.
- Only one animal harmed during the making.
- A lot of excitement from young designers and developers getting into the game.
i just registered on DN to reply to this :) Thx for those infos, i'm currently also building a website that utilizes the scrolling behaviour. Can you share any information about how you have actually build the website? Everything is based on WebGL but the Screenmanager did you build it yourself, or is it based on a library? Just curious :)
Agree with John, it's terribly distracting.
Scrolljacking forces me to consume the content the way the designers think I consume content - which is great for some, terrible for others.
We all read websites differently, and consume at different speeds - which is why shoving everyone into the same funnel isn't ideal.
And, one of the most obvious things about this page - it takes longer to load with all the effects/JS etc, which will make me leave as it takes too long, and possibly hurt your search engine ranking (IIRC).
This still gives me motion sickness.
Actually I just realised it might because my hardware setup is kinda weird: I have a wacom tablet instead of a mouse, and I have one of the buttons on it set to “pan” which lets me scroll pages in the same way that you pan around a document in photoshop.
This means that any amount of scrolljacking induces that uncanny valley effect Sacha is talking about.
it's just really, really easy to mess up.
Couldn't agree more. Rewriting native interactions breaks a lot of user expectations and results in frustration. But it can be done right.
A while back I was researching all the possible solutions and libraries, ended up building my own prototype.
it CAN be done right.
I'm sure it can be done right, but I'd argue it definitely isn't being done right if it kills scrolling in any of the major browsers...
The only way to scroll that page in Firefox is actually grabbing the scrollbar or using Page up/donw. Neither scrollwheel or arrowkeys work.
I have to say I actually have never seen this done as well as in Mikk’s codepen…
Edit: Mikk, did you ever get it to work right in Firefox?
This is where scrolljacking works. With a small gesture, it automatically orients the user and positions the content at the top. This feels like a smart default. When you have "chunks" of content and the user wants to go through it one by one. Yeah, this feels obvious. Nice work.
IMO, scrolljacking is a pattern and like all patterns it should be used for a specific job. When you understand what that job is, it works. When you use scrolljacking (or any pattern) because you think it's cool without understanding why it exists in the first place, you typically end up misusing it.