Anatomy

The section splits into three areas: a centered header block (eyebrow label, H2 title, subtitle paragraph); a full-width drag track that overflows hidden and contains a flex row of cards; and a progress indicator row below the track. Each card is a fixed-width column (300px) with a 4:3 aspect-ratio icon zone at the top, an optional tag badge, a bold title, and a muted description paragraph. The entire flex row is wrapped in a single motion.div that receives the drag prop.

How it works

A single shared motion value x drives everything. The parent motion.div is set to drag="x" with dragConstraints pointing to the container ref and dragElastic={0.08} for a slight rubber-band at the edges. Each ServiceCard receives dragX (the same x value) and its own index. Inside each card, two useTransform calls read the current x value synchronously: they compute the card's projected screen position (cardOffset + val + center) and measure its distance from both viewport edges. When that distance drops below -80px, opacity decreases from 1 to 0 over a 120px range, and scale shrinks from 1 to a minimum of 0.88 over a 600px range. The progress scaleX is derived the same way: a useTransform callback maps x to the 0..1 range based on the computed maxLeft constraint.

How to build it in React

1. Create the shared motion value and drag track

   Declare a single useMotionValue(0) for x in the parent component. Attach a ref to the overflow-hidden wrapper div, then pass both to the motion.div as drag="x", dragConstraints={trackRef}, and style={{ x }}. Set dragElastic={0.08} so the row resists overscroll slightly.

   const x = useMotionValue(0);
   const trackRef = useRef<HTMLDivElement>(null);
   
   <div ref={trackRef} className="w-full overflow-hidden">
     <motion.div drag="x" dragConstraints={trackRef} dragElastic={0.08} style={{ x, display: "flex", gap: 24 }}>
       {cards.map((card, i) => <ServiceCard key={card.id} dragX={x} index={i} totalCards={cards.length} />)}
     </motion.div>
   </div>

2. Derive per-card opacity and scale from drag position

   Inside each card, compute the card's projected left and right screen positions using its index, CARD_WIDTH, and CARD_GAP. Then call useTransform on dragX to map that distance-from-edge to opacity and scale. Cards fully inside the viewport stay at opacity 1 and scale 1; cards crossing the edge fade and shrink proportionally.

   const opacity = useTransform(dragX, (val) => {
     const pos = index * (CARD_WIDTH + CARD_GAP) + val + center;
     const distFromEdge = Math.min(pos, viewWidth - pos - CARD_WIDTH);
     return distFromEdge > -80 ? 1 : Math.max(0, 1 + distFromEdge / 120);
   });
   
   const scale = useTransform(dragX, (val) => {
     const pos = index * (CARD_WIDTH + CARD_GAP) + val + center;
     const distFromEdge = Math.min(pos, viewWidth - pos - CARD_WIDTH);
     return distFromEdge > -80 ? 1 : Math.max(0.88, 1 + distFromEdge / 600);
   });

3. Add the progress bar

   Below the drag track, render a 1px horizontal line and a child div with origin-left. Compute scaleX via a useTransform callback that maps the current x value to the 0..1 range: divide the negative x offset by maxLeft (the maximum drag distance). Apply it to the child div's style.

   const progressScaleX = useTransform(x, () => {
     const maxLeft = -(totalWidth - trackRef.current!.offsetWidth);
     if (maxLeft >= 0) return 1;
     return Math.max(0, Math.min(1, 1 - x.get() / maxLeft));
   });
   
   <motion.div className="h-full origin-left" style={{ scaleX: progressScaleX, backgroundColor: "var(--color-accent)" }} />

4. Clamp x on drag start for responsive layouts

   The maxLeft constraint depends on the container's actual rendered width, which changes on resize. Read it inside onDragStart from the real DOM via trackRef.current.offsetWidth. If the current x value is already out of the valid range, which can happen after a viewport resize, clamp it back before Framer Motion applies its own constraints.

   onDragStart={() => {
     const viewW = trackRef.current!.offsetWidth;
     const maxLeft = -(totalWidth - viewW);
     const cur = x.get();
     if (cur > 0) x.set(0);
     if (cur < maxLeft) x.set(maxLeft);
   }}

When to use it

Reach for this pattern when you have five or more services, features, or offerings that won't fit in a readable grid at common breakpoints. It works well on agency sites, SaaS feature pages, and product landing pages where each service is distinct enough to deserve its own card. Avoid it when the items are highly comparable and users need to scan all of them side by side, a static grid serves that better. On very large screens where all cards fit, the drag interaction becomes inert; consider hiding the progress bar in that case to avoid a confusing UI.

Used by

• Stripe, Horizontal drag-to-scroll product feature rows on its Payments and products pages.
• Shopify, Scrollable card rows for feature highlights on its features marketing page.
• Notion, Draggable horizontal feature carousels on several product and use-case landing pages.
• Webflow, Touch-draggable card sections presenting product capabilities in a scrollable row.

FAQ