Pointer-triggered interactions animate an element on hover, click, or focus — for buttons, cards, and inputs.
Where: Right sidebar → Interact → Interactions → “+” → Pointer — Add a hover / click / focus interaction
Key ideas
- Triggers: Hover, Click, and Focus each fire the animation on that pointer/keyboard event.
- Reverse & yoyo: Click can reverseOnClickOutside; hover/click/focus support yoyo to play back on release.
Steps
- Select the element.
- Add a hover, click, or focus interaction.
- Define the to-state animation.
- Enable yoyo or reverse-on-click-outside if you want it to undo.
Choose a trigger by intent
- Hover is pointer entry/exit, Click responds to click, and Focus responds to keyboard/accessibility focus.
- Define the to-state animation for the selected target and use yoyo when the element should return as the trigger releases.
- Click can use reverse-on-click-outside to restore the prior state after a click elsewhere.
Test pointer and keyboard behavior
- Preview hover with the pointer entering and leaving the target.
- Test Click with a second click and outside click if those behaviors are configured.
- Tab to the element and confirm Focus behavior; do not make essential information available only on hover.
Tips
- Use matching hover and focus feedback so keyboard users receive a comparable state cue.
Limitations and important notes
- Hover is not available on every touch device; provide click/focus or another interaction for essential functionality.