✳flâneur — a map of the web's best reading

Scroll Strip

devouringdetails.com · 866 words · saved by 1 readers

Making a custom scroll experience can seem straightforward. But there are a few pitfalls to avoid when implementing scrollable non-traditional interfaces. There are also libraries out there that implement "smooth scrolling". This strategy often ends up up feeling awkward because they overwrite the scrolling feel that people are used to on most websites. Let's look at building a carousel similar to the Devouring Details home page. My requirement for the interaction was to scroll horizontally with vertical scroll. This sounds weird, but bare with me! To scroll horizontally on a traditional mouse you must hold the ⇧ key which most people aren't used to, and nor is comfortable to do so, so the majority of websites don't use horizontal scroll on the document. We will come back to this later. For now, give this demo a vertical scroll and see how it feels You may not find anything wrong with it if you are using a pointing device like the Magic Mouse that naturally smooths the scroll and ret

Devouring Details Have you ever noticed that some animation sequences can be improved with just a touch of delay? Or that some interactions just feel better without any motion at all? Devouring Details is an interactive reference manual for interaction-curious designers, containing 23 chapters with 23 downloadable React components. All footage is recorded of React components Platform Before working on this I thought to myself: “how have I learned myself?” By trying to build an idea and realising it sucks in practice. With enough iterations and sometimes by accident I’ll get to a place where it

Explore this link on the map →

related reading