Nobody expects the scroll behavior to be different on a webpage, so it's always a surprise when a page does something like this. Then, you have to learn to adapt to how it expects you to scroll so that you don't screw up its animations or overshoot.

It's the kind of UI that works if you scroll a specific way. A lot of people probably do. But if you don't, it's all very tedious. I consider that to be poor design.

It ignores my scroll wheel most of the time if I try to scroll multiple times in a row.

The scroll is delayed significantly from when I scroll to when it actually scrolls.

The amount scrolled is inconsistent, sometimes it scrolls a very slowly a tiny amount because the page doesn't fit on the screen by an unknown tiny fraction, but if I scroll again because it is scrolling both slowly and with delay it now scrolls an entire page.

If I want to scroll past one of the demos I have to wait

If I drag the scroll bar on the side slightly it often snaps backwards.

It feels like I'm interacting with a phone/tablet screen on a computer, there's a reason why windows 8 failed.

For me, I scrolled, clicked, but the page hijacked my screen, moved its position by force, and I was not certain which pane I was on immediately. It broke my sense of continuity.

I am only being literal when I say this, but as someone who is actively keeping an eye out for this sort of thing (CSS frameworks, UI kits), I lost interest pretty immediately when I saw that and closed the tab immediately. Assuming the people who made this page also made the UI kit, it tells me their web design values run contrary to mine.

I don't even fall into one of the exceptional cases, and this was a very bad using-a-website experience for me.

It's completely broken if you use it with a mouse that has a scrollwheel.

It just violates my expectations, and thus feels frustrating. And there's almost no benefit.

It would be like if my shoes suddenly made me take steps at perfect widths, and no matter how/where I tried to step on my own, they forcibly move my foot to the spot they think is best. Like, okay, I see the good intentions here. But I have no trouble walking on my own. I don't need help. So I'm not sure what problem this solves. And this would obviously feel jarring and awkward, and would take a lot of getting used to until it didn't.

Except at least my shoes go with me, so presumably if I had a pair of auto-stepping shoes I would get used to them over time. But this website is a one-off, I'm going to visit once and never again, so it's just going to be weird and jarring, and then I'll leave.

Some of the "slides" have more content than fits vertically in the viewport, and trying to scroll to the bottom to see it without getting bounced to the next slide or back to the top is very touchy and tedious.

Different browsers handle scrolling differently, and people use a myriad of different "pointer" input devices, there's too many permutations to handle correctly. It's for similar reasons why building native inputs from scratch are fraught with peril (see this item from a few days ago)

https://news.ycombinator.com/item?id=48930136

I’m on my phone and scrolling this page just leads to it constantly jumping up and down and makes it difficult to read as nothing stays in one place if I scroll a little bit.

In my case it's way too sensitive, causing me to scroll too far every time.

Navigating by clicking and holding a desired position on the scrollbar is completely broken.

It is bad because you are deciding something for ME, the user. That's bad UX because I want to decide my own experience and scroll jacking is the worst thing you can do for UX. Stop doing this.

On a desktop or laptop computer, most trackpads have an immediate response curve. I am using one now, an Apple Wireless Trackpad. A very large amount of engineering effort over decades of time and millions of lifetime hours went into making it behave that way over a common wireless medium. I scroll a little bit, it scrolls a little bit, immediately, I scroll a lot, it scrolls a lot, immediately, and if I flick my finger from the bottom to the top and let go, it behaves as if I swiped a page of paper on my desk in the same fashion, with inertia taking over, proportional to how fast I flicked.

There is therefore an intrinsic physical link between the actions of my fingers, and the motion on the web page. My finger moves, and an immediate, proportional response is observed. This is an utterly base level of how most humans interact with the world. It is why using a mouse or trackpad came quite easy to many people (and why some can flick a mouse in a shooter, turn a precise 274.9 degrees, move up 14.2 degrees, and click on the head of an enemy player in fractions of a second with pinpoint accuracy). It is also why even a toddler can use a touchscreen; direct manipulation is inherently understandable to even a baby.

When I am turning in a screw by hand with a screwdriver, the feeling of the screws threads through the handle into my fingers, the immediate force feedback, the observable, feelable progress of the screw in or out of its screwhole, forms this same interface. Where human and tool meet, latency and unexpected behavior, especially if divorced from the input force, are undesirable qualities of a tool.

Scroll jacking is to a trackpad or a fine scroll wheel as turning a screwdriver handle by twisting a bungee cord is to using a screwdriver. It unhooks the immediate, direct feedback from the motion of my hand; its jarring, unpleasant, frustrating. On this page, I immediately put two fingers on the trackpad and moved them less than a centimeter, and didnt let go, and the entire screen cycled its view, as if I pressed a button "move to next item". Except I didn't (and why would I want that in the first place???), I just moved my fingers less than a centimeter. Nothing in the real world moves like that except for things less than a centimeter away from falling out of balance. And it feels the same. Precarious. A common human reaction to things moving out of proportion to our body is nausea!

I think a better question is, can you give an example of "why/how" this solves any actual problem someone would have had scrolling this website had it not used scroll snapping? Would the top comment have been "Boy I wish this site had used scroll snapping, it would have been more well done and enjoyable that way"?

I moved my scroll wheel a single tick and the content of the browser window completely changed with no movement to indicate scrolling was happening.

The change was so sudden and stark that I thought some sort of error had occurred and I was looking at a broken render of whatever I should be seeing.

Might be slightly better if the background didn't change color as soon as you move off the first "slide". Then it might not feel like you left the site or got dumped to an error page.

Running a performance profile in Chrome doesn't back this up for me, and looking at the loop it looks like it maintains an active `Set<JellyComponent>()` of which components to update, and clears them out when they stop moving.

Agreed the comments look a bit slop-ish but I don't see anything obviously wrong with its approach, and the core loop is running in microseconds for me when nothing is happening.

> This is the kind of thing usually a human notices and says 'dont do that, that is kind of crazy'.

It's not crazy. That is literally what 99.99% of video games do. They repaint everything constantly, only limited by either your vsync rate or hardware.

I always had this issue when working with Flash developers. A common mantra was "don't reimplement scrollbars unless you can implement all the features a scrollbar comes with." They always had to do more than five iterations and spent days on that scrollbar.

Good catch. I've updated the button logic. The click will no longer trigger if the cursor is outside the button boundary.

I'm glad I read your comment, I missed that it intentionally gracefully degraded and assumed it was broken, as I'd forgotten I'd set that.

PSA: Apple menu > System Settings > Accessibility > Motion

These cool demos come up now and again and it always takes me a minute to remember I have reduced motion. But for that minute I was disappointedly clicking around thinking "Whats the big deal?"

Point taken and now you both get notifications as well as a pretty bunny icon to click on, to over rule the system settings.

I like the fact that it gives animated feedback to emphasize what is happening/being altered. Native components don't always do that very well. Animations are not just artsy fluff, they have real UX value (if done right, of course).

I flip back and forth every year or so between wanting more fun in my software, and wanting it to get the hell out of my way.

I used to "get high" as a kid on the spiral illusion thing he built :)

The library does respect the client-side reduce motion setting (by disabling all animated effects).

A single function button should not behave differently based on where on the button you click it.

EDIT: It's also WILDLY inconsistent. Click and drag on a button and the shape doesn't change. Click and drag on an on/off and the deformation follows the mouse. Merely click an on/off and the deformation does not follow the the little circle thingy, or bear any relation to the action of the button.

Some of the things are inoffensive, spinner dots, progress bars, accordion menus. But basically anything that deforms on click related to where you click are nonsense.

EDIT 2: The buttons in the demo area apparently do have distortion that follows the mouse, but on the left side they don't? For me this is just a lot of bafflingly inconsistent gloss that makes me wonder what's going on or why one thing behaves differently than others, and what that means for actual functionality. Rather than just interacting with the UI.

Agreed. This is the liquid glass interaction the world deserved

We're porting our electron app to it as we speak

i think on HN you tend to get overly critical non-useful signals

very important to filter out and choose who you engage with

Most pages aren't meant to be 100% utilitarian. Most are meant to be little bits of art, that faces a user, that the user will enjoy interacting with.

Sometimes we built for the pure joy of making. Practicality is a bonus.

Me.

candy store, ice-cream place, kid's website?

Point taken, scroll-jacking has been removed.

I'm torn between ugh and ick.

It's poorly implemented and looks crude and unpolished.

There might be an idea there, for limited applications, but this isn't it.

> Compiz

Wow, you just unlocked a memory. Good times.

I miss wobbly windows.

Nor Firefox on Android.