---
title: "Striped Carousel — Free Framer component · Best of Framer"
description: "Free Framer component · by Jirei · Carousels. The Striped Carousel replaces basic sliding animations with a sophisticated \"falling curtain\" transition that adds a premium, dynamic…"
canonical: "https://framer.elliotli.dev/component/striped-carousel"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Striped Carousel

# Striped Carousel

Striped image reveal transition.

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

![Striped Carousel preview image 1](https://framer.elliotli.dev/og/component/striped-carousel/6f89b075247348fe/1600x1200.jpg)

## Summary

The Striped Carousel replaces basic sliding animations with a sophisticated "falling curtain" transition that adds a premium, dynamic feel to your portfolio or landing page.

## Description

Elevate your Framer site with a completely custom, highly-performant photo gallery component. The Striped Carousel replaces basic sliding animations with a sophisticated "falling curtain" transition that adds a premium, dynamic feel to your portfolio or landing page.

**\### Key Features**

\- **Dynamic Transition:** Images are sliced into perfectly aligned vertical stripes that fall away in a staggered sequence depending on navigation direction.

\- **Hardware Accelerated:** Built with advanced CSS \`transform\` and \`borderRadius\` mathematics to ensure subpixel perfection and flawless 120fps rendering, avoiding the lag of heavy \`clip-path\` calculations.

\- **Responsive Layout:** Works beautifully at any aspect ratio, with images automatically scaling via native \`cover\` logic.

\- **Fast Navigation Support:** Click through images as fast as you want—in-progress animations will seamlessly snap to completion to keep up with the user.

**\### Customization Options**

Available directly in the Framer Property Panel:

\- **Images:** Add as many photos as you want via standard Framer image arrays.

\- **Stripes:** Control the exact number of slices (up to 20 for optimal performance).

\- **Animation:** Fine-tune the fall distance, total duration, and stagger gap.

\- **Aesthetics:** Configure border radius, width, color, and style.

\- **Arrows:** Fully style the navigation arrows (Size, Background, Color).

\- **Overflow:** Toggle whether the falling stripes are hidden by the component bounds or visibly fall outside of them.

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

-   All · #7096

## Details

- **Author**: Jirei
- **Published**: 2026-05-04
- **Updated**: 2026-07-30
- **Added**: 2026-05-02
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view