How to Animate a Pull-to-Refresh Control
Design and build responsive pull-to-refresh animations: resistance curves, rotation progress, trigger thresholds, spinner states, and smooth release springs.
Core Takeaway
Pull-to-refresh motion relies on progressive resistance. As the user pulls down past the top scroll boundary, apply logarithmic dampening so pulling gets harder. Rotate an arrow or progress ring proportionally to pull distance. Once past the threshold (typically 60-80px), release triggers the loading state; the spinner holds position until data finishes loading, then springs back smoothly.
Resistance physics during the pull phase
A linear pull where the indicator moves 1:1 with finger distance feels loose and disconnected. Applying a friction multiplier (e.g. 0.4x to 0.6x) or a square-root dampening function conveys physical tension.
Threshold feedback and state transitions
Clearly signal when the user has pulled far enough to trigger a refresh. Pair the threshold with a subtle rotation flip of the indicator arrow or a haptic tap on mobile devices.
- Pulling phase: rotate indicator 0 to 360 degrees proportional to pull distance
- Threshold reached: flip arrow or trigger subtle haptic tick
- Loading phase: lock indicator at resting height (e.g. 48px) and spin continuously
- Complete phase: spring smoothly back to -48px offscreen
Preventing scroll conflicts
Only allow the pull gesture to begin when the scroll container's scrollTop is strictly equal to 0. If the user scrolls mid-list, pull-to-refresh must stay disabled.
Accessibility alternatives
Gesture-only controls exclude users with motor impairments or those using screen readers. Always provide a visible 'Refresh' button in the toolbar as an accessible alternative.
Key Principles to Remember
- Use friction curves to provide physical weight during pulling
- Give clear visual and haptic confirmation when threshold is reached
- Hold spinner cleanly while data loads, spring away on resolve
- Provide an explicit button alternative for accessibility
Frequently Asked Questions
Sources
- Swipe to Refresh Pattern — Material Design 3
- Touch and Gestures — Apple Human Interface Guidelines