---
title: "Two-Phase Carousel — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Konstantin Nikolaev · Carousels. Two-phase scroll-driven carousel"
canonical: "https://framer.elliotli.dev/component/two-phase-carousel"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Two-Phase Carousel

# Two-Phase Carousel

Two-phase scroll-driven carousel

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

![Two-Phase Carousel preview image 1](https://framer.elliotli.dev/og/component/two-phase-carousel/a413258c758cbb31/1600x1200.jpg)

## Summary

Two-phase scroll-driven carousel

## Description

ITEMS

\- Add as many items as you need (up to 20)

\- Each item supports a Framer Responsive Image with alt text

\- Per-item link to internal or external pages

\- Per-item title that displays above or below the image

\- Round or square item shape

PHASE 1 — THE ROTATION

As the user scrolls, items orbit around a circle and the camera tilts subtly to give the rotation depth. The focused item gradually scales up and shifts toward viewport centre, ready to hand off to phase two.

Controls:

\- Scroll Length — vh reserved for the rotation animation

\- Rotations — number of full turns before snapping

\- Tilt — subtle 3D lean during rotation

\- Item Scale — base size of non-focused items

\- Focus Effect — toggle the focus emphasis on or off

\- Focus Scale — how much the focused item grows

\- Focus Sharpness — gradient vs. spotlight focus

\- Intro Rotation — optional one-time spin on mount, decelerating to rest, hinting that the gallery is interactive

PHASE 2 — THE GALLERY

Once the rotation completes, the gallery snaps into a horizontal step-through. Navigation is true step-by-step: scrolling never skips items and never lands you between two of them. Each item passes through centre.

Controls:

\- Scroll Navigation — keep scrolling to advance through items, or stop after the snap

\- Arrows — show or hide left/right arrows

\- Arrow Color and Arrow Background

TITLES

Each item can carry its own title, fully styleable.

\- Show or hide titles

\- Position above or below the image

\- Padding distance from the image

\- Font, color, size

\- Five reveal animations: Slide Bottom, Slide Bottom + Blur, Slide Top, Slide Top + Blur, Blur Fade

HOVER

Items react with a subtle scale on hover during the gallery phase. Tunable size multiplier; pointer cursor appears on linked items.

COMPATIBILITY

Built with framer-motion. Works on desktop and mobile. Respects responsive images and lazy-loads off-screen items.

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

-   All · #8692

## Details

- **Author**: Konstantin Nikolaev
- **Price**: $5.00
- **Published**: 2026-04-27
- **Updated**: 2026-07-09
- **Added**: 2026-04-27
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow