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
• Mouse move
• Page load
• Scroll
• Custom event

Most triggers, like Click and Hover, fire once when an event happens. Mouse move works differently: it's a continuous trigger that tracks the cursor's position and drives your interaction's timeline for as long as the cursor is inside the trigger's tracking area.

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

Mouse move trigger settings

The Mouse move trigger has its own settings, since it tracks a continuously moving value instead of a single event:

• Target — choose Viewport to track the cursor across the entire browser window, or Class to track it only within elements that match a class you choose
• Filter — available when Target is set to Class, this narrows which matching elements are affected based on their relationship to another element. Options include Within, Direct child of, Contains, Direct parent of, Next to, Next sibling of, and Previous sibling of. Defaults to None, which applies no filtering and targets all matching elements
• Smooth — a millisecond value that controls how quickly the tracked position catches up to the cursor. Lower values feel snappier, higher values feel smoother and more delayed. Defaults to 50 ms
• Rest state (X, Y) — percentage values that set where the tracked position defaults to when the cursor isn't active in the tracking area. Both default to 0%

Distance is normalized behind the scenes, so an element's travel feels consistent whether the cursor enters close by or from across the section.

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.