DiscoverCurated list

Smooth Scroll Libraries

Tools and guides for creating fluid scrolling animations and interactions in web development using modern JavaScript techniques.

@theagbuilder

6 items

Resizable - Accessible panel groups and layouts with keyboard support

ui.shadcn.comshadcn · Article

The Resizable component provides accessible, keyboard-navigable panel groups for creating flexible layouts. Built on react-resizable-panels, it exports three core components: ResizablePanelGroup as the container, ResizablePanel for each resizable section, and ResizableHandle for the draggable divider between panels. Supports both horizontal and vertical orientations, RTL configurations, and optional visible handles. The library was recently updated to v4 with notable API changes including renaming of some props (defaultSize now uses percentage strings, direction becomes orientation, onLayout becomes onLayoutChange) though the shadcn/ui wrapper components remain stable.

#component libraries#web-development#accessibility#javascript#react#ui design

Open source

Cal.com Web Screen: Feature Info with Banner, Card, Icon & Grid List UI Elements

mobbin.comArticle

This is a screenshot from Mobbin's design inspiration library showing Cal.com's web interface, specifically a Feature Info screen that demonstrates several key UI components including a banner, card layout, icon usage, and grid list structure. The screen serves as a reference example for designers and developers looking to understand how Cal.com organizes and presents feature information in its web application. Mobbin curates thousands of such real app designs to provide design inspiration and best practices for both mobile and web interfaces. This particular screen is useful for studying layout patterns, component composition, and visual hierarchy in a productivity-focused B2B SaaS application.

#design inspiration#ui-elements#web-development#component libraries#product design

Open source

Get Started

madewithgsap.com@madewithgsap · Article

Made With GSAP is a curated resource and code repository showcasing high-end animation techniques built with the GSAP (GreenSock Animation Platform) library. The platform provides pre-built, production-ready animation effects with clear tutorials and well-structured, easily implementable code that creators can use as starting points for their own projects. Resources cover performance optimization, accessibility considerations, mobile responsiveness, and modular effects that can be combined and customized. The tool has become a central reference for creative developers, motion designers, and developers seeking to build sophisticated animations efficiently without overengineered or bloated code.

#animation#gsap#web-development#javascript#motion design

Open source

10 Principles for Fluid UI

karlkoch.meKarl Koch · Article

Physics-based spring animations should replace time-based keyframes to create interfaces that feel alive and responsive. Ten foundational principles: animations must use spring dynamics rather than fixed durations, be interruptible mid-flight, enable direct manipulation over buttons, preserve gesture velocity into animations, and maintain consistency across interactions. This approach treats UI elements as physical objects with momentum, mass, and damping rather than abstract state machines.

#ui design#animation#interaction design#motion design#ux#web-development

Open source

Lenis

lenis.devdarkroom.engineering · Article

Lenis is a free, open-source JavaScript library that provides smooth scrolling functionality with minimal setup - just one line of code. Originally developed as an internal tool by darkroom.engineering for syncing WebGL with the DOM, it's now a widely adopted industry standard used by other scroll libraries like Locomotive Scroll. The library is lightweight (under 4kb), highly customizable, and includes features like scroll snapping, horizontal/vertical scrolling, and infinite scrolling while maintaining web accessibility.

#javascript#scroll#web-development#animation#open-source

Open source

Scroll stack

codepen.ioArticle

A CSS/HTML code example demonstrating a stacked card animation effect that responds to scroll behavior. Cards are positioned with specific transforms and shadows to create a layered, perspective-based visual as the user scrolls down the page.

#css#scrolling#animation#codepen#web-design

Open source