Fanned Card Carousel is a GSAP-powered interactive card component that arranges cards in a customizable fan arc and animates them with elastic spring physics on every rotation.
Click to rotate — click the left or right half of the carousel to rotate cards in that direction
Navigation arrows — optional left/right arrow buttons with pulse feedback on click
Auto-rotate — timer-based automatic rotation with configurable interval (1–5s)
Pause on hover — auto-rotate pauses when the user hovers over a card
Drop in up to 30 Framer components as cards(image, video or anything you want)
Spacing — controls how tightly or loosely cards fan out
Position X / Y — repositions the entire fan anchor point within the frame
Three cursor modes when click-to-rotate is enabled:
Arrow — a frosted circular overlay with a directional chevron that flips based on mouse position
Normal — system cursor with a subtle click pulse for feedback
Custom — attach any Framer component as the prev and next cursor states
Toggle visibility, choose between sides (left/right edges) or center positioning
Control vertical offset, size, background color, and arrow color independently
Testimonial stacks, portfolio card piles, product showcases, deck-style navigation, mood boards, and any layout where a tactile, physics-driven card interaction is needed.
Arafat Hossain
