Interactions animate your page with GSAP and its plugins (ScrollTrigger, SplitText, ScrambleText, MotionPath, CustomEase), the engine behind many award-winning sites. Each interaction has a trigger and a timeline of steps.
Start from a preset
Select an element, open the Interactions tab of the inspector, press Add and pick a preset.
Triggers
| Trigger | Plays when | Options |
|---|---|---|
| Load | the page loads | — |
| Scroll | the target scrolls into view | start, end, scrub with scroll |
| Hover | the pointer enters the target; reverses on leave | target |
| Click | the target is clicked; a second click reverses | target |
Any interaction can also be played from a workflow with the Play interaction step, whatever its trigger.
Scroll triggers
A Scroll into view trigger uses GSAP ScrollTrigger. On is the element that starts it.
- Start and End take two words: a point on the element, then a point on the window.
top 80%starts when the top of the element reaches 80% of the window height.bottom topends when its bottom leaves the top of the window. Offsets such astop bottom-=100work too. Leave End empty for the automatic end. - Scrub ties the animation to the scroll position: it moves forward as you scroll down and backward as you scroll up, between Start and End. Parallax uses it.
- Without scrub, the animation plays once when the element reaches Start and stays at its end.
Build the timeline
Open an interaction to see its steps. Each step has these rows:
| Row | What it sets |
|---|---|
| Target | The element the step animates |
| From / To | Starting and ending values of properties; press + to add one. Only From animates from those values to the current design; only To animates from the design to them. |
| Effect | None, Split text, Scramble text or Motion path (see Effects) |
| Timing | D duration and W wait (delay), in seconds |
| Stagger | Spacing between the elements the step animates (see Staggers) |
| Ease | The speed curve, including Custom curve… (see Eases) |
| Position | Where the step sits on the timeline: -=0.3 to overlap the previous step, < to start with it. Empty means after the previous step. |
Property values
Each property gets a field that fits it, with the unit shown:
| Property | Field |
|---|---|
opacity, autoAlpha | Percent, 0–100%, like Opacity in the Design tab. autoAlpha also hides the element at 0%. |
x, y | Pixels |
xPercent, yPercent | Percent of the element's own size |
rotate, rotateX, rotateY, skewX, skewY | Degrees |
scale, scaleX, scaleY | A factor: 1 is the design size, 0.9 is 90% |
borderRadius | px, % or rem |
color, backgroundColor | A colour picker |
filter, clipPath | CSS text, such as blur(8px) or inset(0 0 100% 0) |
Drag the icon of a number field to scrub its value. A step marked with a warning has a value that cannot play; open it to see the problem listed under the steps.
Staggers
A step animates every element it matches: each item of a collection list, or each piece of a split text. Stagger spreads their start times.
- Each sets the seconds between one element and the next. Total sets the seconds for all of them together, whatever their number.
- From picks where the cascade starts: Start, Center, End, Edges or Random.
- Grid staggers by distance in a grid of items, such as cards in rows, so the cascade spreads out in two directions from From.
"ix_cards": {
"trigger": { "type": "scroll", "target": "n_list", "start": "top 80%" },
"timeline": [
{ "target": "n_card", "from": { "y": 60, "autoAlpha": 0 }, "stagger": { "each": 0.08, "from": "center", "grid": "auto" }, "duration": 0.6 }
]
}
A stagger of only Each from Start is stored as a number ("stagger": 0.1).
Effects
Effect adds a GSAP plugin to the step. Pick one per step:
| Effect | What it does | Rows |
|---|---|---|
| Split text | Splits the target's text into Chars, Words or Lines and animates each piece. A small stagger is added for you. Mask clips each piece to its own box, for text that rises from below. | Split |
| Scramble text | Shows random characters that resolve into the target's own text. | Scramble: the characters (ABC, abc, AbC, 123, #$%) and Spd (speed) |
| Motion path | Moves the target along a path, relative to where it sits. | Path: SVG path data, such as M0,0 C80,-80 160,80 240,0. Rotate: Follow the path turns the element with the curve. |
A text reveal by characters:
{ "target": "n_h1", "from": { "yPercent": 100 }, "split": { "type": "chars", "mask": true }, "stagger": 0.03, "duration": 0.6 }
Eases
Ease sets how the speed changes during the step. The list has GSAP's eases (power2.out, back.out(1.7), elastic.out(1, 0.3) and more), plus:
rough: a jittery, shaky movement.slow(0.7, 0.7, false): fast, then slow in the middle, then fast.expoScale(0.5, 7): for scale changes that should feel even, such as a zoom.- Custom curve…: shows a Curve row. Enter a cubic-bezier as four numbers (
0.25, 0.1, 0.25, 1, the same as CSScubic-bezier()) or SVG path data from GSAP's ease visualizer. Pick a named ease to go back.
Preview
In design mode elements sit in their final state, so you can edit them. Use the play button on an interaction to preview it, or press ⌘↵ to preview the whole page.
Timeline panel
The timeline panel shows one interaction’s steps as bars on a ruler in seconds, so you can see and change the timing at a glance. It works in design mode; in preview the real interactions run instead.
- Open it with the Timeline button in the toolbar or ⌥T. In the inspector’s Interactions tab, the Open in timeline button on an interaction opens the panel on that interaction. The panel docks under the canvas; drag its top edge to make it taller or shorter, and it remembers the height.
- Pick the interaction in the menu at the top left. A badge next to it shows its trigger.
- Scrub. Press or drag on the ruler or on empty track space to move the playhead, and the canvas shows the animation at that moment. With the ruler focused, the arrow keys move the playhead by 0.01 s (hold ⇧ for 0.1 s), and Home / End jump to the start or the end.
- Play it. The transport shows the current time and the total, with Go to start, Play, Go to end, Loop and the playback speed (0.25x, 0.5x, 1x or 2x; click to change it).
- Zoom with the Zoom in, Zoom out and Fit timeline buttons, or ⌘ + scroll over the tracks.
Edit steps on the timeline
- Drag a bar to move the step in time, and drag its right edge to change its duration. Edges snap to 0, to the playhead and to the other bars; hold ⌥ to turn snapping off. One drag is one undo step.
- The layer column on the left names each step’s target. Click a name to select that layer (Shift or ⌘ + click adds it to the selection). Rows of selected layers are highlighted.
- With the keyboard, click or tab to a bar, then use ← / → to move the step by 0.01 s (hold ⇧ for 0.1 s), ⌥← / ⌥→ to resize it and ⌥↑ / ⌥↓ to move it up or down the list. ↵ selects its layer, ⌦ or ⌫ removes the step and ⌘D duplicates it. Arrow presses on one bar count as one undo step.
- Right-click a bar for Select layer, Duplicate step, Move up, Move down and Delete step.
- The step tools in the panel header: Add step adds a step for the selected layer (or the active step’s layer when nothing is selected), and for the active step you can set the ease, Duplicate step or Delete step. An interaction always keeps at least one step.
- Staggers show as a tail after the bar, sized for the real number of elements the step animates, such as the items of a collection list or the pieces of a split text. A Grid stagger's tail is an estimate.
Test the trigger
- Hover interactions get Hover in, which plays the timeline forward, and Hover out, which plays it backwards from the playhead.
- Click interactions get Simulate click, which plays the timeline forward; once the playhead is at the end, it plays it backwards, like a second click.
- Scroll interactions that scrub with the scroll show the playhead as a percentage scrolled.
Per breakpoint
An interaction can be limited to some breakpoints, for example a parallax on desktop only.
Want an interaction to start from logic, such as after a form submits? Use the Play interaction workflow step.