press

Motion's press function detects press gestures, firing events when they start, end or cancel.

It's different to events like "pointerstart" etc in that press automatically filters out secondary pointer events, like a right click or a second touch point.

And it expands on "click" by being amazing for accessibility. Every element with a press gesture automatically becomes keyboard accessible via focus and the enter key.

press("button", (event) => {
  console.log("press started on", event.currentTarget)

  return () => console.log("press ended")
})

press is also:

• Clean: Automatically manages event listeners

• Simple: Accepts Elements or CSS selectors for attaching multiple listeners

• Lazy: Attaches only the listeners needed

It can be used to start and stop animations:

press("button", ({ currentTarget }) => {
  animate(currentTarget, { scale: 0.9 })

  return () => animate(currentTarget, { scale: 1 })
})

Video overview