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.
Tim Yeng
