Triggers & targets in Interactions with GSAP

Learn the trigger types available and how to target and scope the elements they affect.

A trigger decides when your interaction starts, and its target decides which elements it affects. This article covers the available trigger types, how targeting works, and how to scope a target down to exactly the elements you want, whether that's a single element, its siblings, or every match on the page. When you're ready to put a trigger and target to use, see our how-to guide.

Trigger types

Triggers detect the user or system events which then start an action. Trigger types include:

• Click
• Hover
• Page load
• Scroll
• Custom event

Targets

In an interaction you have trigger targets and action targets. You can target by:

• element ID
• class
• attribute
• the element that initiated the interaction

To set a target:

1. Click the default trigger's name to open the target's settings
2. Choose your target
3. Adjust your target's scope as needed

Scope

Scope limits where targets are found, giving you precise control over which elements get animated.

Component scopes

Available in component edit mode:

• Main component — the interaction is scoped to the component and runs on all instances, wherever they're used
• Variant — the interaction runs only on the selected variant(s) of the component
• Component instance — a one-off, page-scoped interaction on a single instance; it doesn't travel with the component

Simple scopes

These don't require an additional selector:

• All matching elements (default) — targets every element on the page that matches your selector
• Children — only targets direct children of the matching elements
• Siblings — targets elements that share the same parent
• Parent — targets the parent element
• Next sibling — targets the immediately following sibling
• Previous sibling — targets the immediately preceding sibling

Advanced scopes

These require an additional selector:

• Descendants — all descendants that match a selector you specify
• Ancestors — all ancestors that match a selector you specify
• First descendant — the first descendant matching your selector
• First ancestor — the first ancestor matching your selector

Example: You have a button with class .trigger-btn inside a card. When clicked, you want to animate:

1. The card's title (.card-title), use scope "First ancestor" with selector .card
2. All icons inside the card, target .icon with scope "Descendants" and selector .card
3. The next card in the list, target .card with scope "Next sibling"

This way, clicking any button only affects elements related to that specific card, not all cards on the page.