Drag and Swipe Interactions
Overview
Drag and Swipe are two touch-and-mouse interaction triggers that let your visitors physically manipulate elements on the page. Drag tracks continuous pointer movement and can optionally scrub a timeline animation as the user drags. Swipe detects a quick flick gesture in a specific direction and fires an animation in response.
Both triggers live under the Hover & Click interaction category and share the same From/To animation workflow as Click and Hover, so everything you already know about keyframes, presets, and transitions applies here too.
Prerequisites
- An element selected on the canvas.
- The Interact section visible in the right sidebar (Design panel).
Drag Interaction
1. Add a Drag interaction
- Select the element you want to make draggable.
- In the right sidebar, open the Interact section and click Add Interaction.
- In the interaction type list, look under the "More" section and choose Drag (labelled "Animate on drag").
A new interaction card appears with the header Drag Effect.
2. Configure the Axis
The Axis dropdown constrains which directions the drag gesture is tracked.
| Value | Label in UI | Behavior |
|---|---|---|
x | X / Horizontal | Only horizontal pointer movement is tracked. |
y | Y / Vertical | Only vertical pointer movement is tracked. |
both | Both (default) | The element responds to movement in any direction. |
3. Enable Scrub Animation
The Scrub Animation toggle (labelled Scrub in the inline view) connects the drag distance to your animation timeline.
- Off (default): The drag gesture triggers the animation to play once, like a Click trigger.
- On: The animation progress is mapped directly to how far the user has dragged. Dragging forward advances the animation; dragging back reverses it.
Scrub mode is especially powerful combined with a Timeline animation mode, where you can control multi-property animations frame by frame.
4. Choose an animation mode
Drag is a standalone trigger when Scrub is enabled -- the inline settings are shown directly without a From/To preset picker. When Scrub is off, you get the full animation mode selector:
| Mode | Label | Description |
|---|---|---|
| Simple | Simple | Choose a preset animation (fade, slide, scale, etc.) that plays on drag. |
| State | State | Animate between two element states when the user drags. |
| Timeline | Timeline | Link to a multi-layer timeline for full keyframe control. |
5. Fine-tune via the Settings popover
Click the gear icon on the interaction card to access additional settings shared across all interaction types:
- Trigger Scope -- Local (this element only), Global (all elements sharing the same class), or Relative (children, siblings, parent).
- Stagger, Container Query, and Advanced sections are available when applicable.
Swipe Interaction
1. Add a Swipe interaction
- Select the target element.
- Open the Interact section and click Add Interaction.
- Under the "More" section, choose Swipe (labelled "Animate on swipe gesture").
A new interaction card appears with the header Swipe Effect.
2. Set the Direction
The Direction dropdown determines which swipe gesture triggers the animation.
| Value | Label in UI | Behavior |
|---|---|---|
left | Left (default) | Fires when the user swipes from right to left. |
right | Right | Fires on a left-to-right swipe. |
up | Up | Fires on a bottom-to-top swipe. |
down | Down | Fires on a top-to-bottom swipe. |
any | Any | Fires on a swipe in any direction. |
3. Adjust the Threshold
The Threshold field sets the minimum distance (in pixels) the pointer must travel before the gesture counts as a swipe.
- Default is 50 px.
- Lower values make the trigger more sensitive; higher values require a more deliberate flick.
- Minimum accepted value is 1 px.
4. Enable Reverse Animation
The Reverse Animation toggle controls what happens after the swipe animation finishes.
- Off (default): The animation plays once and the element stays in its final state.
- On: The animation automatically reverses after playing, returning the element to its original state.
5. Choose an animation mode
Swipe supports the same three animation modes as other Hover & Click triggers:
| Mode | Label | Description |
|---|---|---|
| Simple | Simple | Pick a preset animation that plays on swipe. |
| State | State | Animate between two saved element states. |
| Timeline | Timeline | Link a multi-layer timeline animation. |
6. Configure From/To properties (Simple mode)
In Simple mode, you can customize the animation beyond presets:
- Click From Effect to set the starting state of the animation.
- Click To Effect to set the ending state.
- Click the Transition button to adjust duration, delay, and easing curve.
Tips
- Drag + Scrub for sliders. Constrain the axis to X / Horizontal and enable Scrub Animation to build a custom slider or before/after comparison widget without code.
- Swipe for mobile navigation. Set Direction to Left and Right on separate interactions to create swipe-to-navigate patterns for mobile-first layouts.
- Combine with Carousel. If you need a full slide-based experience with snap points, consider the dedicated Carousel interaction instead. Use Swipe for lighter, single-animation gestures.
- Lower the threshold on mobile. Touch swipes tend to be shorter than mouse swipes. A threshold of 30-40 px feels more natural on phones.
- Use Any direction carefully. Setting Direction to Any fires on every swipe gesture, which can conflict with page scrolling. Reserve it for full-screen takeover moments.
Common issues
| Symptom | Likely cause | Fix |
|---|---|---|
| Drag does not move the element | Scrub is off and no animation is configured | Either enable Scrub Animation or add a From/To animation in Simple or State mode. |
| Swipe fires too easily | Threshold is too low | Increase the Threshold value (try 60-80 px). |
| Swipe does not fire at all | Threshold is too high, or the swipe direction does not match | Lower the Threshold or change Direction to Any for testing. |
| Animation plays but does not reverse | Reverse Animation is off | Enable the Reverse Animation toggle in the Swipe trigger settings. |
| Drag scrub feels jerky | The linked animation has very few keyframes | Add more intermediate keyframes in the Timeline editor, or use a smoother easing curve. |
| Interaction does not work in the designer | Drag and Swipe require runtime | Open Preview mode to test -- these interactions do not run on the designer canvas. |
Related articles
- Follow Mouse Interaction -- element physically follows the cursor without requiring a drag gesture.
- Mouse Move Scrub Animation -- scrub an animation based on cursor position rather than a drag gesture.
- Carousel Interaction -- full slide-based carousel with snap points and navigation.
- Transitions & Easing -- customize duration, delay, and easing curves for any interaction.