Animated List Movement
A animated list movement built with modern frontend techniques for responsive and reusable UI.
Lists
14 snippetsWelcome to the Lists resource page — a curated directory for developers. Browse practical UI patterns, specialized libraries, and small interactive demos. Use the table of contents to explore subcategories below.
javascript-lists
Snippets(14)
- List Stack with View Transitions
A list stack with view transitions built with modern frontend techniques for responsive and reusable UI.
- List Click on Expand N1
A list click on expand n1 built with modern frontend techniques for responsive and reusable UI.
Sliding List with Scroll-Driven AnimationsA sliding list with scroll-driven animations built with modern frontend techniques for responsive and reusable UI.
GSAP Flip Layout ExpansionA gsap flip layout expansion built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 60+, Safari 11+Features
FLIP Animation, Layout Morphing, Nested Scaling, State Management
GSAP ScrollTrigger List ExpansionA gsap scrolltrigger list expansion built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
ScrollTrigger, Card Stack Effect, CSS Clip-path, Responsive Mobile Mockup
Literally Linked ListsA literally linked lists built with modern frontend techniques for responsive and reusable UI.
Difficulty
intermediateFeatures
data visualization, relationship mapping- The Magic of Cascading CSS Counters
A the magic of cascading css counters built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Counters, JavaScriptDifficulty
IntermediateFeatures
Dynamic numbering, Nested counters, Interactive controls 
To-Do ListA to-do list built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
BeginnerFeatures
Paper effect, Skew transformation, Interactive checkboxesResponsive
Yes
Little DetailsA little details built with modern frontend techniques for responsive and reusable UI.
Difficulty
intermediateFeatures
nested lists, hover reveal, custom markers, tooltipsResponsive
Yes
To-Do List App with ES6A to-do list app with es6 built with modern frontend techniques for responsive and reusable UI.
Technologies
ES6, CSS3, HTML5Difficulty
IntermediateFeatures
Task Filtering, Responsive Design, Single-Page ApplicationResponsive
Yes
Transaction List with View TransitionsA transaction list with view transitions built with modern frontend techniques for responsive and reusable UI.
Technologies
View Transition API, CSS, HTMLDifficulty
intermediateFeatures
Morphing animations, Master-detail view, Zero-dependency transitions
Dynamic Data-Driven Tag Cloud ComponentA dynamic data-driven tag cloud component built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 42+, Edge 14+, Firefox 39+, Safari 10.1+Features
Data-Driven Scaling, Fetch API, Inset Hover FillResponsive
Yes
Live User FilterA live user filter built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerFeatures
live-search, dynamic-filteringResponsive
Yes