Spatial Carousel

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

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.

Spatial Sticky Scroll Carousel