ActivityFeed

Animated notification list with avatars

An animated notification list where items appear one by one with smooth spring physics. Auto-play cycles through up to 24 notifications with configurable delay and max visible count. Built for SaaS dashboards, social apps, and landing pages that need an engaging live activity feed effect. Features Spring-based animations for natural fluid item entry Auto-play cycles through notifications with configurable delay Up to 24 notification items supported Configurable max visible items at once (1–12) Circular avatar image per notification Hover scale animation on each card Optional bottom gradient overlay for visual polish Animations pause when component leaves viewport Full color controls — container, card, border, title, subtitle Full typography controls — title and subtitle fonts Card radius, padding, gap and border width controls Accessible — ARIA labels, semantic HTML, alt text on avatars No dependencies Property Controls Content Items — avatar, title, subtitle per notification (up to 24) Delay — time between each item appearing (100–5000ms) Max Visible — maximum items shown at once (1–12) Colors — container background, card background, border, title, subtitle Typography — title font · subtitle font · size, weight, spacing, line height Layout — card radius (0–40px), padding (6–32px), gap (0–24px), border width (0–6px) Hover — hover scale factor (1.0–1.15) Avatar — avatar image size (24–72px) Gradient — enable/disable toggle · gradient height (0–60%) · gradient start color Technical Details Framer Motion spring physics — stiffness 350, damping 40 useInView pauses animations when out of viewport startTransition for React 18 performance Semantic HTML with role attributes and ARIA labels Keyboard navigation support Alt text on all avatar images Default Settings 5 pre-configured notification items with avatar images 420px × 384px default size 1000ms delay · 5 max visible items Gradient overlay enabled Hover scale 1.05 Use Cases SaaS dashboards · Social app feeds · Activity trackers · Landing page social proof · App UI mockups · Onboarding flows · Real-time notification previews · Product demos SEO Keywords framer notification feed · framer activity feed · framer animated list · framer notification component · framer live feed · framer notification list · framer social feed · framer dashboard component · framer animated notifications · framer spring animation · framer feed component · framer saas component · framer activity list · framer code component · framer notification ui

Animated notification list with avatars