Scoping decides what triggers an interaction and what it animates — and, for repeated components, whether each instance reacts on its own or all together.
Where: Interaction popover → Settings — Open an interaction and go to Settings
Key ideas
- Trigger vs target: sourceSelector is the element that fires; animationTarget is the element that animates (they can differ).
- Instance vs broadcast: mode broadcast affects all matches; instance scopes to the hovered/clicked one via groupSelector + instanceScope.
- Pairing: pairingRule (auto / target-in-trigger / trigger-in-target / siblings) and reverseOnSibling resolve which target pairs with which trigger.
Steps
- Open the interaction’s Settings.
- Set the trigger (sourceSelector) and the animation target.
- For repeated components, switch to instance mode and set the group selector.
- Pick a pairing rule so each instance pairs correctly.