Chapter 99: Vue gesture animations

Core Idea

Power your UI with Motion for Vue's gestures: hover, tap, pan, drag & inView. Use while- props for animations & event listeners for interactive experiences.

Key Concepts

• Animation props: motion components provide multiple gesture animation props: whileHover
• Gestures: The hover gesture detects when a pointer hovers over or leaves a component.
• Hover: The hover gesture detects when a pointer hovers over or leaves a component.
• Press: The press gesture detects when the primary pointer (like a left click or first touch p
• Accessibility: Elements with press events are keyboard-accessible.
• Pan: The pan gesture recognises when a pointer presses down on a component and moves further th
• Drag: The drag gesture applies pointer movement to the x and/or y axis of the component.
• Constraints: It's also possible to set dragConstraints
• Direction locking: It's possible to lock an element to the first axis it's dragged on by setting dragDirectionLock.

Code Examples

<motion.button
  :whileHover="{
    scale: 1.2,
    transition: { duration: 1 },
  }"
  :whilePress="{ scale: 0.9 }"
/>

• What it demonstrates: Core usage pattern for Vue gesture animations.

Key Takeaways

1. Vue gesture animations supports Animation props.
2. Vue gesture animations supports Gestures.
3. Vue gesture animations supports Hover.

Connects To

• Vue animations with Motion for Vue: related Motion doc page.
• useDragControls: related Motion doc page.
• Cursor: related Motion doc page.
• Gestures example & tutorial for JavaScript: related Motion doc page.