I think we really have to take a step back away from this annoying scrolling / auto-moving element behavior for product info pages. I had a moment where my mouse was chasing a moving 'Loans' tile.
Designers have gotten really carried away. This stuff looks nice when you click through it in Figma, because it's a slideshow. But when it's interactive it's a pain in the butt.
If you move through the page really slowly it sort of works, but real people in the real world scroll fast to scan the content of the page, and this page is a disaster to scan.
Here I want to learn about the features of Square Banking but I can't do so at a glance, on the landing page for Square Banking. The best solution is to just give up and search Google News for a summary:
I wouldn't call Square's site "scroll hijacking" - usually we use that to refer to when the actual native scroll behaviour/events are highjacked and prevented, and custom javascript scrolling happens. Instead on the Square site the DOM page is still scrolling natively, but an animation is progressed depending on the native page position. Maybe not ideal, but its much smoother and less jarring than actual scroll jacking.
From my experience, scroll snapping is quite nice. On the mobile view of https://www.nytimes.com/, if you scroll down enough, you'll find an example of a scroll snapping row of opinion pieces.
It is 10x better than scroll jacking. Scroll jacking is so repulsive to see anywhere you aren't using a mouse wheel.
On the other hand, at least if it's in CSS, it'll be a single standard method that you can turn off via a browser plugin or whatever, rather than everyone rolling their own.
burlesona|4 years ago
If you move through the page really slowly it sort of works, but real people in the real world scroll fast to scan the content of the page, and this page is a disaster to scan.
tqx|4 years ago
https://drafts.csswg.org/css-scroll-snap-1/
Here I want to learn about the features of Square Banking but I can't do so at a glance, on the landing page for Square Banking. The best solution is to just give up and search Google News for a summary:
https://finance.yahoo.com/news/square-launches-banking-busin...
https://web.archive.org/web/20210720152407/https://finance.y...
madeofpalk|4 years ago
Scroll snapping is just "can i have a carousel without javascript", and is primarily a touch interaction. See this extremely brief demo https://codepen.io/tutsplus/pen/qpJYaK?editors=1100
I wouldn't call Square's site "scroll hijacking" - usually we use that to refer to when the actual native scroll behaviour/events are highjacked and prevented, and custom javascript scrolling happens. Instead on the Square site the DOM page is still scrolling natively, but an animation is progressed depending on the native page position. Maybe not ideal, but its much smoother and less jarring than actual scroll jacking.
ceiphr|4 years ago
It is 10x better than scroll jacking. Scroll jacking is so repulsive to see anywhere you aren't using a mouse wheel.
mikepurvis|4 years ago
On the other hand, at least if it's in CSS, it'll be a single standard method that you can turn off via a browser plugin or whatever, rather than everyone rolling their own.
circa|4 years ago