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.
Separate the trigger from the animated target
- The selected trigger can animate itself, another element, or a set of matched elements; configure the source selector and animation target independently.
- Broadcast mode applies broadly, while instance mode pairs repeated trigger/target instances using the selected pairing rule.
- A group selector scopes matching inside a repeated component/card so one interaction does not accidentally animate every matching element on the page.
Pairing rules and validation
- Pairing rules include automatic matching, target-in-trigger, trigger-in-target, and sibling relationships.
- Use a stable class or selector and confirm that it matches the intended repeated structure.
- Preview multiple instances—not only the first card—to verify that each trigger affects its own target.
Tips
- Use the narrowest selector that expresses the component relationship; broad page-wide selectors can create surprising cross-instance effects.
Limitations and important notes
- Selector-based targets depend on the rendered DOM structure and can stop matching after structural edits.