LEARN / INTERACTION

Motion

One inherited setting controls interaction intensity. Native HTML keeps ownership of navigation, disclosure and overlay state; CSS supplies the presentation.

Scrolling and scroll-to-top use the core stylesheet. Enhanced overlay motion and independent button materials use their optional stylesheets, described below.

These pages describe RevaCSS 2.0.0 in development. Use the documentation build for a preview or build the stylesheets from source.

Choose one page setting

Set data-motion on html, then override only exceptions. The default core intensity is subtle. The customizer applies the same setting to these pages.

Setting	Anchor links and galleries	Optional overlays	Accordions and indicators
`none`	Immediate scrolling; no animated highlight	Immediate opening and closing	Immediate state changes
`subtle`	Native smooth scrolling	140ms fade; drawers slide 1rem	140ms transitions where supported
`expressive`	Smooth scrolling and a brief target highlight	240ms fade with .6rem translation and .97 scale; drawers slide 2rem without scaling	240ms transitions; supported accordions also fade content

Configure the page once

<html lang="en" data-motion="subtle">
<head>
  <link rel="stylesheet" href="/assets/reva/reva.css">
  <!-- Optional: native overlay transitions. -->
  <link rel="stylesheet" href="/assets/reva/reva.motion.css">
</head>
<body>
  <!-- Your content -->
</body>
</html>

Optional liquid buttons also follow this setting: none removes expansion, subtle uses a gentle scale, expressive increases the stretch and elastic return. Reduced motion suppresses movement. See Button materials.

Anchor navigation and scroll snap

In the core, scroll containers use the inherited motion setting. Ordinary href="#id" links and scroll-snap gallery links remain native. Dragging, swiping and wheel scrolling retain browser behavior; there is no automatic advancement or JavaScript scroll handler.

The browser chooses smooth-scroll timing and easing and may ignore smoothing. Subtle and expressive therefore have the same native scrolling speed. Expressive adds a 1.4s accent highlight to targeted headings, the first heading in a targeted section, or a targeted gallery list item. The fragment identifies a destination, not a selected slide.

The highlight begins when the URL fragment changes, possibly before scrolling finishes. Clicking the already active fragment does not reliably restart it. It does not change focus, selection or ARIA state.

Set --re-anchor-offset on your scroll region or page to leave space above destinations, especially beneath fixed headers. The default is 1rem; application CSS can set a larger value. Sticky navbar mode adds its header height, top offset and safe-area clearance without changing scrolling motion. Existing author scroll-margin rules still win. --re-target-duration changes only the highlight duration, not native scroll timing.

Native fragment feedback

Go to the destination

An identifiable destination

The heading receives a brief accent highlight when its fragment is active.

<section data-motion="expressive">
  <p><a href="#motion-destination">Go to the destination</a></p>
  <h3 id="motion-destination">An identifiable destination</h3>
  <p>The heading receives a brief accent highlight when its fragment is active.</p>
</section>

Try the scroll-snap gallery · Scroll-to-top component

Optional overlays and drawers

Load reva.motion.css after the global core, or reva.motion.scoped.css after the scoped core. Native popovers and open dialogs share fade/translation/scale transitions. Drawers and mobile app-shell sidebars translate from their edge, respecting RTL, without scaling.

Opening uses @starting-style. Supported discrete transitions retain display and top-layer paint during a short exit; unsupported browsers close immediately. Backdrops fade where supported. Escape, outside dismissal and closed-state focus behavior remain browser-owned.

A modal dialog still needs a supported native command invoker or an application-owned showModal() call. This stylesheet styles state changes; it does not implement dialog opening, focus recovery, trapping, body-scroll locking or a router.

Moving a drawer to inline-start with your own positioning also requires --re-drawer-direction: -1. The default 1 describes inline-end. --re-drawer-shift, --re-popover-offset and --re-popover-scale allow numeric changes. The module owns overlay opacity, translate, scale and transition declarations; override deliberately rather than combining competing animations.

Dropdown and inspector

<section data-motion="subtle">
  <button type="button" popovertarget="motion-resources">Open resources</button>
  <ul class="dropdown" id="motion-resources" popover="auto" role="list" aria-label="Resources">
    <li><a href="/guide/">Get started</a></li>
    <li><button type="button" popovertarget="motion-resources" popovertargetaction="hide" autofocus>Close resources</button></li>
  </ul>
  <div data-motion="expressive">
    <button type="button" popovertarget="motion-inspector">Open inspector</button>
    <aside class="drawer" id="motion-inspector" popover="auto" aria-labelledby="motion-inspector-title">
      <header><h3 id="motion-inspector-title">Project inspector</h3><button type="button" popovertarget="motion-inspector" popovertargetaction="hide" autofocus>Close inspector</button></header>
      <section><p>The drawer inherits expressive motion and safe-area spacing.</p></section>
    </aside>
  </div>
</section>

Native disclosure enhancement

Accordion motion is already in the core; it does not require the overlay extension. Browsers supporting ::details-content, intrinsic-size interpolation and discrete transitions animate the content. Other browsers keep usable native disclosure with a rotating indicator where available. No guessed maximum height or extra wrapper is required.

Expressive disclosure with a local exception

What changes with expressive motion?

Supported browsers animate expansion and add a content fade.

A local exception

This disclosure changes immediately.

<div class="accordion" data-motion="expressive">
  <details><summary>What changes with expressive motion?</summary><p>Supported browsers animate expansion and add a content fade.</p></details>
  <details data-motion="none"><summary>A local exception</summary><p>This disclosure changes immediately.</p></details>
</div>

Overrides, preferences and fallbacks

Reduced motion, forced colours and print remove the added scroll/highlight and overlay animation even inside an expressive branch.
The nearest scroll container owns scrolling. A motion override on a heading cannot change document scrolling; put the override on html for page navigation, or on a containing gallery for its own scrolling.
The scoped build only styles inside .reva. It can control an island's scroll containers, but cannot animate the outer document's scrolling. Place global document rules in application CSS when appropriate.
Local overrides still control target feedback and component transitions. Keep top-layer elements inside their configured DOM parent.
Focus rings, selected states and error messages stay visible when motion is off. See effects and state feedback.

Scroll-driven card entrances and cross-document transitions remain separate optional files. See modern CSS patterns for their installation and support boundaries.

Standards: native smooth scrolling · starting styles and discrete transitions.