Elastic Physics Pull-to-Refresh Gesture
An elastic pull-to-refresh interaction pairs continuous pointer drag gestures with logarithmic friction. As the user pulls downward, resistance increases non-linearly until reaching a trigger threshold, transitioning the state machine from Pulling to Refreshing.
Technical Specifications
Interaction Phases
The scene keeps one Idle state. These phases are driven by its inputs and pointer events; the same values appear in the code below.
Use the scene
import { ExodeUICanvas } from 'exodeui';
// pull-to-refresh.bexode goes in /public
export function PullToRefresh() {
return (
<ExodeUICanvas
src="/examples/live/pull-to-refresh.bexode"
fit="Layout"
autoPlay
interactive
inputs={{
label: 'Today',
tension: 260,
damping: 20,
accent: '#ff4a1c',
bg: '#f4f1ea',
ink: '#171310',
}}
style={{ width: '100%', height: 520 }}
/>
);
}This snippet loads /examples/live/pull-to-refresh.bexode with the same inputs shown in the live stage.
Architectural Breakdown
Bad pull-to-refresh implementations lock the scroll position or feel linear and gummy.
ExodeUI applies physical resistance formulas where drag distance yields diminishing vertical displacement.
Once triggered, the indicator holds above the card while the spinner runs, then the card settles back when the refresh lands.
Frequently Asked Questions
Explore Related Motion Guides & Tooling
Build your next living interface today.
Design fluid physics and visual logic in ExodeUI and export directly to React, Swift, and Flutter.