---
title: "Animated List — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Syauqizaidan Khairan Khalaf · Cards. Animated List steps through your items on a timer, animating each card into place with smooth scale/opacity transitions."
canonical: "https://framer.elliotli.dev/component/animated-list"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Animated List

# Animated List

Notification cards, one at a time

[View on Framer](https://framer.com/marketplace/components/animated-list/?via=elliot-li)

![Animated List preview image 1](https://framer.elliotli.dev/og/component/animated-list/8ee66c9deb73741e/1600x1200.jpg)

## Summary

Animated List steps through your items on a timer, animating each card into place with smooth scale/opacity transitions.

## Description

Bring your “latest updates” to life. **Animated List** steps through your items on a timer, animating each card into place with smooth scale/opacity transitions. It automatically adapts to mobile/desktop, supports custom icons and colors, and lets you tune typography for name, description, and time. Choose a delay between items, loop continuously, and style the card/border/gradient to match your brand.

Under the hood, the component maintains an index and reveals items cumulatively (newest at the top), with Framer Motion handling entry/exit for crisp performance.

## Key Features

-   **Sequential reveal:** Items appear on a schedule (delay), stacking newest first.
    
-   **Looping:** Restart from the first item for continuous motion.
    
-   **Responsive layout:** Adjusts spacing, card radius, and icon size below your breakpoint.
    
-   **Custom visuals:** Emoji/character icons with per-item **color**; full control of background, borders, text, and optional gradient overlay.
    
-   **Typography controls:** Separate fonts for **Name**, **Description**, and **Time**.
    
-   **Lightweight:** No external CSS; animations powered by Framer Motion.
    

## Perfect For

-   Notifications / activity feeds
    
-   Product updates & changelogs
    
-   Social/event timelines
    
-   “What’s new” and marketing highlights
    

## How It Works (under the hood)

-   The component increments an internal **index** on a fixed **delay**.
    
-   A memoized slice returns items.slice(0, index + 1).reverse() so the newest revealed card appears on top.
    
-   **Loop** resets the index when the end is reached.
    
-   A resize listener toggles **mobile mode** using your **breakpoint** to adjust padding, icon size, and radii.
    
-   Cards enter with a spring scale/opacity animation and exit cleanly via AnimatePresence.
    

## Props & Controls

Content

-   **Items** (Array) — each item:
    
    -   name (string)
        
    -   description (string)
        
    -   icon (string, e.g., "🔔")
        
    -   color (icon background)
        
    -   time (string, e.g., "1m ago")
        

Behavior

-   **Delay** (ms, default 1000) — interval between reveals.
    
-   **Loop Animation** (boolean, default true) — restart once all items are shown.
    
-   **Mobile Breakpoint** (px, default 768) — switches to compact sizing below this width.
    

Appearance

-   **Background** (card)
    
-   **Text Color** (primary)
    
-   **Secondary Text** (description/time)
    
-   **Border Color**
    
-   **Show Gradient** + **Gradient Color** (optional overlay)
    
-   **Name Font**, **Description Font**, **Time Font**
    

## Quick Start

1.  Drop **Animated List** onto your page.
    
2.  Open **Items** and add your updates (icon + color recommended).
    
3.  Set **Delay** (e.g., 1200ms) and enable **Loop** if you want continuous motion.
    
4.  Tweak **colors** and **Fonts**; adjust **Mobile Breakpoint** if needed.
    

**Tip:** Use short names and concise descriptions for snappy, readable cards—especially on mobile.

## Implementation Notes

-   Newest card animates in **at the top** (the list is reversed at render).
    
-   Hover adds a subtle **scale** effect for interactivity.
    
-   Cards use safe defaults for shadow, radius, and spacing; all tuned per breakpoint.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #8553

## Details

- **Author**: Syauqizaidan Khairan Khalaf
- **Price**: $5.00
- **Published**: 2025-10-09
- **Updated**: 2026-11-05
- **Added**: 2025-10-03
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator