Knowledge base
Concepts
Six pages covering what the pieces of a Webflow GSAP interaction are and how they relate: the trigger/target/action model, timeline control, relationship-based targeting, stagger, Split Text, and scroll-driven animation.
The knowledge base is published in English only.
Answers to “what is this” and “what’s the difference between…”. Recipes and pitfalls
point here through assumes:, so this is where a beginner’s traversal starts and where an
expert’s stops.
Read The interactions model — trigger, target, action, timeline first if you read only one. Every other page in the bundle assumes it.
| Page | What it answers |
|---|---|
| The interactions model — trigger, target, action, timeline | Trigger, target, action, animation, timeline — and how the action’s type replaces the old initial-state step |
| Timeline control — control, speed, jump to, delay, repeat | Control, speed, jump to, delay, and why interaction repeat is not action repeat |
| Target filters — resolving a target relative to the trigger | How one interaction serves twelve identical CMS cards: the target/filter/reference composition |
| Stagger — spreading one animation across many targets | Offset time vs total time, the from origin, the two easings, and when GSAP’s stagger is the wrong tool |
| Split Text — turning one text element into many targets | Splitting one text element into words, lines or characters, and what the mask option does |
| Scroll-driven animation — scrub versus trigger actions | Scrub on scroll vs trigger actions, the tall-section-plus-sticky-window scaffold, thresholds |
Reading order for a beginner
The interactions model — trigger, target, action, timeline → Timeline control — control, speed, jump to, delay, repeat → then whichever of Stagger — spreading one animation across many targets / Split Text — turning one text element into many targets / Scroll-driven animation — scrub versus trigger actions the question needs. Target filters — resolving a target relative to the trigger is advanced and only matters once a component is repeated.
Status
All six pages are verified. Target filters — resolving a target relative to the trigger is verified against the Designer UI
itself, so its dropdown labels can be quoted to a reader verbatim.
Concepts 6
- Scroll-driven animation — scrub versus trigger actions
Every scroll animation is one of two kinds: a scrub, where the playhead is tied continuously to scroll position, or trigger actions, where crossing a threshold fires an animation that then plays on its own clock; choosing wrong is the most common cause of a scroll effect that feels off, and the scaffold for a scrub is always a tall section with a sticky full-viewport window inside it.
- Split Text — turning one text element into many targets
Split Text breaks a single text element into words, lines or characters so each piece becomes its own animation target, which is what gives stagger something to spread across; the mask option wraps every piece in its own clipping container so it stays hidden until it moves into view.
- Stagger — spreading one animation across many targets
Stagger spreads a single animation across multiple targets, so it does nothing at all with one target; offset time sets a fixed gap between each target's start while total time is one budget divided across the intervals, and the stagger's own ease shapes the distribution of delays — a different job from the action's ease.
- Target filters — resolving a target relative to the trigger
An action's target is not one setting but three composed into a sentence — what to target, a filter, and the element the filter is measured against — so "the sidebar that is the previous sibling of the trigger" is Previous sibling of + Trigger element, not a single menu option; this is what lets one interaction serve every card in a CMS collection.
- The interactions model — trigger, target, action, timeline
A Webflow GSAP interaction is a trigger that fires one or more actions, each applied to a set of targets and laid out on a horizontal timeline; the action's type (to / from / from to) absorbs the initial state, so there is no separate initial-state step the way Classic Interactions had.
- Timeline control — control, speed, jump to, delay, repeat
One GSAP timeline can be driven by many events, and the event settings decide what each one does to it: control moves or holds the playhead, speed changes the rate without moving it, jump to repositions it, and repeat loops either the whole interaction or a single action — which are not the same thing.