---
title: "Spatial Carousel — Free Framer component · Best of Framer"
description: "Free Framer component · by Tim Yeng · Carousels. Spatial Carousel maps native vertical scrolling to multi-directional component movement."
canonical: "https://framer.elliotli.dev/component/spatial-carousel"
---

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

# Spatial Carousel

Spatial Sticky Scroll Carousel

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

![Spatial Carousel preview image 1](https://framer.elliotli.dev/og/component/spatial-carousel/f25bca667f3a0db2/1600x1200.jpg)

## Summary

Spatial Carousel maps native vertical scrolling to multi-directional component movement.

## Description

Spatial Carousel maps native vertical scrolling to multi-directional component movement. By pinning a main container to the viewport, it captures scroll progress and distributes connected child components along a customized 2D trajectory. Because the movement relies entirely on mathematical X and Y transforms, you can configure the items to move horizontally, vertically, or at diagonal angle based on the parameters you set.

**Property Configuration**

-   **Layout & Trajectory**
    
    -   **V Gap:** Sets the vertical spacing between each connected item.
        
    -   **H Spread:** Sets the horizontal spacing. _(Note: Adjusting the ratio between V Gap and H Spread dictates the specific diagonal angle of the scroll path)._
        
-   **Visual Focus**
    
    -   **Scale Drop:** Determines the percentage by which inactive items shrink as they move away from the active index.
        
    -   **Fade:** Controls the opacity reduction for items outside the immediate center of focus.
        
    -   **Rotation:** Applies a continuous Z-axis rotation to items as they progress along the scroll path.
        
-   **Timing & Physics**
    
    -   **Scroll Dist:** Defines the exact amount of viewport height (vh) the user must scroll to transition from one item to the next.
        
    -   **Friction & Stiffness:** Controls the underlying Framer Motion spring physics, determining how rigidly the items track to the scroll position and how much momentum they carry.
        

**Practical Applications**

-   **Directional Sliders:** Building horizontal or diagonal carousels that progress via mouse-wheel or trackpad scrolling rather than drag gestures.
    
-   **Step-by-Step Timelines:** Displaying sequenced information or roadmaps where each sequential item snaps to the center of the viewport.
    
-   **Stacked Galleries:** Creating overlapping image or card layouts that fan apart dynamically as the user navigates down the page.
    

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

-   All · #692

## Details

- **Author**: Tim Yeng
- **Published**: 2026-04-07
- **Updated**: 2026-07-07
- **Added**: 2026-03-16
- **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