Card Swap

Stunning natural scenery with breathtaking views and serene environments

Contemporary building designs with innovative structural concepts

Vibrant cityscapes with dynamic urban environments and modern living

Customize CardSwap

Card Distance60px

Vertical Distance70px

Delay5000ms

Skew Amount6°

Width500px

Height400px

Pause on Hover

Easing

Property	Type	Default	Description
width	`number \| string`	`500`	Width of the card container.
height	`number \| string`	`400`	Height of the card container.
cardDistance	`number`	`60`	Horizontal distance between cards.
verticalDistance	`number`	`70`	Vertical distance between cards.
delay	`number`	`5000`	Delay between card swaps in milliseconds.
pauseOnHover	`boolean`	`false`	Pause animation when hovering over cards.
onCardClick	`(idx: number) => void`	-	Callback function when a card is clicked.
skewAmount	`number`	`6`	Amount of skew to apply to cards.
easing	`'linear' \| 'elastic'`	`'elastic'`	Type of easing for animations.
children	`ReactNode`	`required`	Card components to display.

gsap

Created with ❤️ by Cybershoora