Staircase Carousel

Turn an ordinary image gallery into a dynamic visual experience.

Staircase Carousel is an interactive Framer Code Component that transforms your photos into a beautifully animated, stair-inspired gallery. Images move horizontally while shifting vertically, creating a distinctive staircase effect with smooth spring transitions.

Navigate through images using arrows, pagination dots, keyboard controls, or swipe gestures. Customize the layout, animation, colors, typography, and images directly inside Framer.

Great For

• Creative portfolios and photography websites

• Architecture and interior design showcases

• Fashion and editorial galleries

• Product presentations and brand storytelling

• Creative agencies and personal websites

• Experimental landing pages and interactive galleries

Preview: https://staircasecarousel.framer.website/

Features

• Interactive Staircase Layout — Photos move vertically and horizontally to create a unique gallery composition.

• Smooth Spring Animation — Customizable motion with adjustable bounce and timing.

• Interactive Navigation — Previous/next arrows, clickable pagination dots, and slide counter.

• Swipe Support — Navigate using touch and pointer gestures.

• Keyboard Navigation — Supports arrow keys, Home, and End.

• Editable Photo Collection — Add, remove, reorder, and replace images.

• Animated Titles — Display a title for the selected photo.

• Demo Photos Included — Comes with six example images to help you get started.

• Responsive Sizing — Adapts photo width to the available space.

• Reduced-Motion Support — Respects the user's motion preferences.

• Accessible Labels — Includes image descriptions and carousel navigation labels.

• No Extra Animation Libraries — Built with React, TypeScript, and CSS transitions.

Support

Have a question, found an issue, or want to share feedback?

X / Twitter: @karimsaif0

Email: karimsaif010@gmail.com

Made with 💛 by Karim Saif