motion-press

Wraps any element and applies a spring-based compression on pointer press. Snaps back on release.

Preview

Import

import 'motion-components/motion-press'   // just this one
import 'motion-components'               // or the whole library

Usage

<motion-press scale="0.95">
  <button>Press me</button>
</motion-press>

Properties

Attribute Property Type Default Description
scale scale number 0.95 Target scale on press
duration duration number 0.15 Spring duration of the press and release, in seconds
bounce bounce number 0.4 Spring bounciness of the release (0 = no overshoot)
disabled disabled boolean false Ignore pointer input and settle to the rest state

Accessibility

Respects prefers-reduced-motion: when enabled, the press animation is disabled.