Drag and scroll triggers
Let a layer follow the pointer and switch states when it's dragged far enough, or let scrolling scrub the timeline.
Two triggers react to movement rather than clicks. Drag lets a layer follow the pointer, springs it back on release, and runs its action when the release went far enough: a switch knob, a card you swipe away, a pull-to-refresh. Scroll progress ties the timeline to scrolling, so the scroll position becomes the playhead: a hero that assembles as you scroll, a progress ring.
Add a drag trigger
- Select the layer to drag, for example a switch knob.
- In the Interactions tab, click + next to Triggers, then set the event menu to Drag.
- Set the action and state, for example Go to On.
- In the trigger's second row (the hand icon), pick the axis and the distance: Horizontal and Past 20 pt.
- Try it: click Try it on the stage and drag the knob. Release before 20 pt and it springs back; release past it and the scene goes to On.
Drag options
| Option | Choices | What it does |
|---|---|---|
| Axis | Horizontal, Vertical, Free (default) | Which way the layer follows the pointer |
| Distance | Past −80 pt, −40, −20, 20, 40 or 80 pt (default 60 pt) | How far a release has to go for the action to run. Negative is left or up; with Free it's the distance in any direction |
| Gate | In any state, Only in … | Two drag triggers on one layer can go both ways: past 20 pt → On (only in Default), past −20 pt → Default (only in On) |
On release, the layer springs back to where it rests (a spring of 0.35 s with bounce 0.25, or the trigger's own transition). If the new state moves the layer on that axis, it glides from where you dropped it straight into the state instead.
Add a scroll-progress trigger
- Build the animation on the timeline as usual: what should happen from the top of the scroll to the bottom.
- Add a trigger and set its event to Scroll progress. The row now reads “Scrolling scrubs the timeline”; there's no action to pick.
- Optionally set the target to the element whose way through the view should drive it in web exports; Scene uses the page scroll.
- Click Try it on the stage and scroll over the stage with the trackpad or mouse wheel. The bar says “Scroll over the stage to scrub the timeline”. Two canvas heights of scrolling cover the whole timeline.
In exports
| Export | Drag | Scroll progress |
|---|---|---|
| Motion (React) | Motion drag with dragSnapToOrigin and onDragEnd | useScroll drives the timeline's clock |
| HTML | Pointer listeners that move the layer with translate | Scrubs the page's CSS animations |
| SwiftUI | A DragGesture | Plays through; a comment shows where to drive it from your scroll view |
| CSS, Lottie, Web Animations, video | No | No (the timeline plays as usual) |
// Motion (React): the knob follows the pointer on x and switches past 20 pt
<motion.div
drag="x"
dragSnapToOrigin
dragMomentum={false}
onDragEnd={(_, info) => { if (info.offset.x >= 20) go("on"); }}
/>The exported code differs in detail; the snippet shows the idea.
Works with
- A toggle with color states and a drag: a switch you can tap or drag.
- States: what the drag switches to.
- Exports that stay interactive
Troubleshooting
| If this happens | Try this |
|---|---|
| The layer doesn't move when dragged | Check the trigger's target: a drag needs a layer, not Scene. The Interactions tab says “Drag trigger has no layer to drag.” |
| The layer moves but nothing happens | The release didn't pass the distance, or the gate is closed. Pick a shorter distance or check Only in …. |
| It only moves sideways | The axis is Horizontal. Choose Free to drag in any direction. |
| Scrolling over the stage does nothing | Scrolling scrubs only in the interactive preview, with the pointer over the stage, and only when the scene has a scroll-progress trigger. |