Skip to content
Pinky UI

mobile

Swipe Back Gesture

An edge-anchored back gesture with two-plane parallax — the current screen follows the finger while the previous one trails in behind it.

  • mobile
  • gesture
  • navigation
  • parallax
  • edge
Related pattern

Distinct from Edge Swipe Panel: this is history-back navigation with a trailing previous screen, not a reveal panel.

Live preview

Swipe from the left edge

Quick usage

usage
import { SwipeBackGesture } from "@pinky-ui/systems";

<SwipeBackGesture onBack={goBack} behind={<PreviousScreen />}>{currentScreen}</SwipeBackGesture>

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Every gesture has a labelled button or keyboard path, and primary controls meet a 44px touch target.
  • State remains readable without relying on colour or motion.

Performance

  • Interaction state is local and bounded; gesture updates do not require a page-wide render loop.
  • Timers and listeners are cleaned up on unmount.

Reduced motion

The same state change resolves immediately; travel, scale and spring motion are removed without removing the interaction.

When to use

  • Touch-first product surfaces where the next action should stay close to the hand.

When not to use

  • Desktop-only workflows or interactions whose gesture would hide the only available action.

Skill

Purpose

An edge-anchored back gesture with two-plane parallax: the current screen follows the finger directly from the left edge, and — when supplied — the previous screen trails in from further left at a slower rate, matching a native push/pop navigation transition.

Use when

A mobile navigation stack needs the platform-standard "swipe from the left edge to go back" gesture, and a visual sense of returning to the previous screen matters.

Avoid

  • General-purpose drawer or filter reveals — that's Edge Swipe Panel
  • Multi-height content surfaces — that's Detent Sheet
  • Desktop or non-stack navigation, where there is no "previous screen" to parallax against

Interaction

The gesture only begins within edgeWidth of the left edge — starting a drag anywhere else in the content does nothing, so ordinary horizontal scrolling and swipe gestures inside the screen are undisturbed. Past threshold, release completes the back navigation; short of it, both planes spring back to their resting position on Jelly's elastic curve.

Accessibility

The gesture is a progressive enhancement over an explicit back action — always pair it with a visible back button that calls the same onBack. Nothing here replaces browser/OS back semantics; it composes with them.

Reduced motion

The transition to the previous screen resolves immediately without the parallax travel or elastic settle when motion is reduced.

Performance

Pointer capture keeps the drag bound to one element; both planes animate off shared motion values, so no React re-render occurs while dragging.

Composition and anti-patterns

Don't combine with Edge Swipe Panel on the same edge — two gestures competing for the same 24px strip is unresolvable for the user.

Open this skill on its own page