---
title: "Card Circular Scroll — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Saadat Ali · Cards. Scroll to fan out animated cards"
canonical: "https://framer.elliotli.dev/component/card-circular-scroll"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Card Circular Scroll

# Card Circular Scroll

Scroll to fan out animated cards

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

![Card Circular Scroll preview image 1](https://framer.elliotli.dev/og/component/card-circular-scroll/54c7ec32c9fc0fc3/1600x1200.jpg)

## Summary

Scroll to fan out animated cards

## Description

## Add Premium Components To Your Projects:

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-g094t2v1-8wrj2R4JsfS8dz3uRkUmPxMk3a0JAx)](https://marketplace.framer.com/@saadat-ali-designsbysadat/)[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ectn8thw-7b1PJqGkGxVCbwcjGww89DIM89TglR)](https://www.framer.com/marketplace/components/liquid-glass-logo/)

**Key Features**

-   Scroll-driven animation (no manual triggers needed)
    
-   Smooth spring motion for natural movement
    
-   Fully responsive with automatic scaling
    
-   Supports unlimited cards
    
-   Optional image mode (image fills card, hides text)
    
-   Customizable colors and text styles
    
-   Adjustable initial stack angle
    
-   Clean center alignment with mathematically correct positioning
    

**Customization Options**

-   Card width and height
    
-   Background color
    
-   Initial rotation angle
    
-   Card list (color, text color, or image per card)
    
-   Preview state for canvas testing
    

**How It Works**

-   Cards are anchored at the center and rotate around their bottom-left corner
    
-   Scroll progress drives rotation from stacked → full circle
    
-   A hidden scroll layer controls animation smoothly
    
-   Layout auto-adjusts to fit any screen size
    

**Use Cases**

-   Feature showcases
    
-   Product highlights
    
-   Portfolio presentations
    
-   Interactive storytelling sections
    
-   Landing page hero interactions
    

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

-   All · #1339

## Details

- **Author**: Saadat Ali
- **Price**: $4.00
- **Published**: 2026-04-10
- **Updated**: 2026-07-11
- **Added**: 2026-03-31
- **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