scroll-infinite-feed-motion
Installation
SKILL.md
Infinite Feed with Motion That Does Not Fight the Scroll
What this builds
A content feed (cards, posts, articles, media tiles) that loads additional items as the user scrolls toward the bottom, with entrance animations on new items that never hijack, delay, or fight the scroll position. Items enter the viewport with a brief, velocity-aware animation, and the scroll never jumps, pauses, or resets when new content appends.
- IntersectionObserver-triggered content loading (no scroll-event listeners for load triggers)
- Entrance animations gated by
IntersectionObserver, not by scroll position or scroll events - Velocity-aware animation: faster scrolling means shorter/no entrance animation
- Virtualization for feeds exceeding ~200 items (recycle DOM nodes for constant memory)
- Batch size management: load 10-20 items per batch, never 1, never 100
- Placeholder/skeleton layout that reserves exact space before content loads
- prefers-reduced-motion: items appear instantly, no entrance animation