56:I[473921,["/creators-assets/_next/static/immutable/chunks/36c08p67t0nml.js","/creators-assets/_next/static/immutable/chunks/3ayu63s3pbx5h.js","/creators-assets/_next/static/immutable/chunks/2qqxwi6m3n33t.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3k0o12ps7rnq6.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/271g_l-8c77ee.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/31xze_yiju0_q.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2gb4kwi-0_ftg.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/15z5hu5cixks0.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mwzcaalgk6io.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/3wj273i6wglef.js","/creators-assets/_next/static/immutable/chunks/30ex342hi0wzr.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/222e_wk0i41rv.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/3pe6luvwzbwnz.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/33kea80yupbzt.js","/creators-assets/_next/static/immutable/chunks/3oj8b9u7wi0dw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3f2ccywlofkgw.js","/creators-assets/_next/static/immutable/chunks/1-gdi7ej49wy6.js","/creators-assets/_next/static/immutable/chunks/05yll7e_snxjv.js"],"PostDetailCard"] 57:T104f,

Swipeable Card Stack

A beautifully animated card stack component that lets users swipe through content with fluid, physics-based interactions. Inspired by popular swipe interfaces, this component brings a polished, native-feeling experience to your Framer projects.

Features

Drag in Any Direction Unlike traditional sliders, users can drag cards in any direction - left, right, up, or down. When released past the threshold, the card smoothly animates to the back of the stack.

3D Tilt Effects Cards naturally tilt and rotate as you drag them, creating an immersive, tactile feel. The rotation follows your drag direction and smoothly returns to neutral when the card settles.

Stacked Depth Effect Cards behind the front one are progressively scaled down and offset, creating a realistic deck-of-cards appearance. Customize how much each card peeks out and how much smaller they get.

Customizable Shadows Fine-tune the shadow's position, blur, spread, and color to match your design. Create subtle depth or dramatic floating effects.

Smooth Physics-Based Animations Every interaction uses spring physics for natural, fluid motion. Cards maintain momentum when flicked and settle with satisfying easing.

How to Use

Drag the component onto your canvas
Connect your frames or components to the "Cards" slot
Customize the appearance and behavior using the property controls

Property Controls

Stack Appearance

Stack Offset - How much each card peeks out behind the one in front
Scale Step - How much smaller each card gets toward the back
Visible Cards - Maximum cards shown in the stack at once
Border Radius - Rounded corners for all cards
Perspective - 3D depth intensity (lower = more dramatic)

Shadow

Shadow X/Y - Horizontal and vertical offset
Shadow Blur - How soft the shadow appears
Shadow Spread - Shadow size (negative = tighter, positive = larger)
Shadow Color - Color with transparency

Interaction

Swipe Distance - How far to drag before the card swipes away
Swipe Velocity - Quick flick speed that triggers a swipe
Drag Elastic - How stretchy the drag feels (0 = stiff, 1 = loose)
Rotate on Drag - Enable/disable 3D tilt effect
Max Rotation - Maximum tilt angle when dragging

Behavior

Infinite Loop - Cards cycle endlessly or stop at the last card
Transition - Animation style for stack movements

Perfect For

Image galleries and portfolios
Product showcases
Testimonial carousels
Onboarding flows
Card-based games
Any swipeable content

Notes

Works with any content: images, text, components, or complex layouts
Fully responsive - cards maintain their connected frame dimensions
Touch-friendly for mobile devices
No external dependencies

53:[["$","$L56",null,{"post":{"id":"019ba1df-47e6-768e-8366-c59c24d2ef16","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"057408c6-e22b-48ea-bf1f-d1b1b08a8b93","name":"Duopixel Studio","slug":"duopixel","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1632342/avatar-xhW9Ce1YLCuA2KcxAAc9gT93bJFIfI.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"uGhoYSCOfrqyDodq9mth","resolved":true,"title":"Swipeable Card Stack","body":"$57","bodyJson":null,"introduction":"","slug":"swipeable-card-stack","author":{"framerUserId":"057408c6-e22b-48ea-bf1f-d1b1b08a8b93","name":"Duopixel Studio","slug":"duopixel","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1632342/avatar-xhW9Ce1YLCuA2KcxAAc9gT93bJFIfI.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/uGhoYSCOfrqyDodq9mth/swipeable-card-stack-iuYBEUfUcndyvkfUgtNRMY4uRHZhNP","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-24T16:23:49.547Z","updatedAt":"2026-01-07T12:51:55.842Z","publishedAt":"2026-01-09T08:28:43.366Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://swipeable-cards-slider.framer.website/","price":"6","paymentUrl":"https://buy.polar.sh/polar_cl_ARXrHuPobSmsrSvreqfnQHBpBDbircwkz1rZ41dagoe","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"7pD3GcKKrn3orfEEkzsM","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-09T08:28:43.366Z","updatedAt":"2026-01-09T08:28:43.366Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you