Interactivity

Scroll Snap Align

Utilities for controlling the scroll offset around items in a snap container.

Unsupported

This functionality is not yet supported! If you need this, reach out to us on #smp-warp-design-system.

Quick reference

Class	Description
snap-start	Unsupported
snap-end	Unsupported
snap-center	Unsupported
snap-align-none	Unsupported

Basic usage

Snapping to the center

Use the snap-center utility to snap an element to its center when being scrolled inside a snap container.

snap-center

<div class="snap-x ...">
  <div class="snap-center ..."><img src="..." /></div>
  <div class="snap-center ..."><img src="..." /></div>
  <!-- ... -->
  <div class="snap-center ..."><img src="..." /></div>
</div>

Snapping to the start

Use the snap-start utility to snap an element to its start when being scrolled inside a snap container.

snap-start

<div class="snap-x ...">
  <div class="snap-start ..."><img src="..." /></div>
  <div class="snap-start ..."><img src="..." /></div>
  <!-- ... -->
  <div class="snap-start ..."><img src="..." /></div>
</div>

Snapping to the end

Use the snap-end utility to snap an element to its end when being scrolled inside a snap container.

snap-end

<div class="snap-x ...">
  <div class="snap-end ..."><img src="..." /></div>
  <div class="snap-end ..."><img src="..." /></div>
  <!-- ... -->
  <div class="snap-end ..."><img src="..." /></div>
</div>

Applying conditionally

Hover, focus, and other states

Warp lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:snap-start to only apply the snap-start utility on hover.

<div class="snap-center hover:snap-start"></div>

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:snap-start to apply the snap-start utility at only medium screen sizes and above.

<div class="snap-center md:snap-start"></div>