Design engineering: a carousel component
A scrollable, and swipeable carousel, even on desktop (complete with snapping, friction and overscroll). Inspired by a component made at Finary, a one-stop shop for wealth management. Play with the component, and try changing the card size.
Things to try
Momentum scrolling
Of course you can scroll the regular way, but you can also drag to swipe the carousel. On most browsers (cough cough, Safari...) dragging to swipe will respect the css scroll-snap-align. When you drag to swipe, we use a custom momentum scrolling implementation when needed (desktop browsers). The greater the velocity, the further the carousel will scroll.
Overscroll / rubber-banding
When dragging to swipe, if you give it enough velocity the carousel will overscroll, with a rubber-banding effect, similar to the one you get on touch devices by default. For this to work, we calculate a velocity based on how fast you are moving your mouse and apply a deceleration factor. When yous scrolled to the start of the end of the carousel, you can also trigger the rubber-banding effect by dragging the carousel even more.
Pagination
The carousel can be paginated, using the dedicated buttons, pagination is based on the scroll-snap-align set in css. For this demo, I chose to use center, so the next item that is not fully visible will be centered in the viewport when clicking the next or previous page buttons.
Snapping
Because of the css styles, the carousel items will snap naturally when performing a regular scroll. I chose scroll-snap-align: center for this demo. But when you drag to scroll on desktop, this behavior is not a given. You have to implement it yourself by adjusting the deceleration factor for the velocity, so that the velocity reaches 0 towards the snap point. I also chose to allow small movements not to snap, so that it feels more natural.
scroll-fade
Most scroll fades only animate the opacity when you reach the edges of the scroll area. Instead of doing this, I decided to animate the length of the mask based on the remaining scroll distance. This way, the fading effect is more natural, and the transition is smoother.
That’s a wrap
While implementing the basic version of the carousel is easy, thanks to modern css, implementing momentum scrolling with snapping and overscroll / rubber-banding on desktop isn’t trivial. Maybe I’ll try to enable infinite scrolling at some point, but for now, this is a good start.