Horizontal ScrollX — Cards that glide sideways as you scroll.

Ever tried building a horizontal scroll effect where cards move sideways as you scroll down?

Most people start with Framer’s Scroll Transform - set an X offset in pixels and hope it works. But it doesn't scale. On different screen sizes, layouts break. You either get empty gaps or the cards stop too early.

That's the problem.

Horizontal ScrollX solves it completely.

Instead of relying on fixed pixel values, it calculates the exact overflow dynamically. Your cards always slide perfectly from edge to edge - fully responsive, no matter the screen size.

Drop it into a section, increase the height to control the scroll duration, and you get a smooth, cinematic scroll experience instantly.

What makes this different

Unlike typical horizontal carousel or scroll transform setups, this component is built for real layouts.

• No fixed px offsets
• No broken responsive behavior
• No manual calculations

You design your cards directly in Framer - no slots, no restrictions - and the component handles the scroll logic automatically.

This makes it a true scroll-driven animation system, not just a workaround.

Instructions

1. Add the Horizontal ScrollX component to your Framer canvas.
2. Place it inside a tall Section - the section height controls how long the scroll animation plays.Taller section = slower, more cinematic card movement.
3. In the Layout panel, set the Section’s:

• Direction → Vertical
• Distribute → Start

1. Select the Horizontal ScrollX component and set its Position to Sticky and set the Width to "1fr" and height to "100vh" in the right-hand panel under Position.
2. Add a Scroll Section name in the Section’s right-hand panel (this is required for connection).
3. Connect the Section to the Horizontal ScrollX component using the Section connector in the right-hand panel.
4. Adjust End Spacing, Exit Spacing, and Viewport Anchor from the Horizontal ScrollX property panel to fine-tune the animation.

After purchase, you receive a remix link - paste the full working setup into your project in a single click. No rebuilding from scratch.

How It Works

The component includes a few key controls:

• Section: Defines the scroll container. Its height controls animation length.
• Viewport Anchor: Choose when animation starts - top, center, or bottom of the viewport.
• End Spacing: Adds space after the last card so it doesn’t stick to the edge.
• End Spacing Unit: Use px for fixed spacing or vw for responsive spacing.
• Exit Spacing: Allows cards to continue sliding after the section ends.
• Exit Distance: Controls how far cards travel after exiting the section.

Key Features

1. Fully responsive: Uses container width instead of fixed values - perfect for modern layouts.
2. CMS Supported: Use any CMS field value into the card.
3. No pixel hacks: Dynamic calculations ensure smooth horizontal slide across all screens.
4. Cinematic scroll effect: Smooth, scroll-driven motion tied directly to user interaction.
5. Resize-aware: Automatically adapts when layout or content changes.
6. Performance optimized: Uses better optimisation setup for smooth updates.
7. Native Framer workflow: Design cards freely - no component limitations.

Use Cases

• Landing pages: Showcase features with cards sliding on scroll.
• Portfolio sites: Display projects in a clean horizontal scroll layout.
• E-commerce: Create category rows tied to scroll interaction.
• Storytelling sections: Reveal content progressively with scroll-driven animation.
• Image & logo galleries: Build smooth horizontal carousel experiences.
• Agency websites: Add premium cinematic scroll Framer interactions.

Made with ❤️ by Soyeb

© 2026 Soyeb. All rights reserved.

Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.

Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com