Chapter 78: press()

Core Idea

Discover Motion's press function for robust press gesture detection. Learn how it filters secondary pointers, enhances accessibility with keyboard support, and simplifies event listener management. Explore options for start and end callbacks, and passive/once event handling.

Key Concepts

• Video overview: press can be imported via "motion".
• Import: press can be imported via "motion".
• Press start: press can detect press start gestures on either a Element/array of elements:
• Press end: The press start function can optionally return a function that will be called when the pre
• Cancelling gesture: press returns a function that
• passive: Default: true
• once: Default: false
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

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

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

• What it demonstrates: Core usage pattern for press().

Key Takeaways

1. Clean: Automatically manages event listeners.
2. Convenient: Accepts either elements or CSS selectors for attaching multiple listeners at o.
3. Lazy: Attaches only the listeners needed.

Connects To

• hover(): related Motion doc page.
• inView: related Motion doc page.
• animate(): related Motion doc page.
• Press example & tutorial for JavaScript: related Motion doc page.