Gesture Animations: From Swipe to Long Press
The user swipes a card, but it stutters or doesn't fly off the screen edge. The reason is often an incorrect threshold and velocity calculation. Or the lack of spring return when exceeding boundaries. We solve such problems using mathematical models: spring systems with damping, affine transforms, and haptic feedback. In practice we use spring damping=0.7, velocity=0.5 to make the animation feel natural. For example, in a swipe-to-delete card, the visual feedback anticipates the finger rather than trailing it—thanks to precise threshold and velocity tuning.
At the core of gesture interfaces (see Gesture recognition) lies mathematics. We apply models with damping and stiffness. Our experience: over 50 projects with gesture animation on Swift 5.9+, Kotlin, and Jetpack Compose. As noted in the Apple Human Interface Guidelines, gestures must be intuitive and responsive.
Typical Mistakes We Fix
- Missing velocity check in swipe: without it, users can accidentally delete an element.
- Incorrect anchor point during pinch, causing scaling from the center instead of the touch point.
- No spring return when exceeding boundaries: the interface appears jerky.
- Ignoring haptic feedback on long press—the gesture lacks tactile feel.
We guarantee that all animations will match the platform's native standards: on iOS—UIKit and SwiftUI, on Android—Jetpack Compose and MotionLayout. If necessary, we integrate Core Animation for performance optimization. Before starting, we audit the existing implementation—often problems hide in the gesture recognizer configuration or anchor point.
Get a free audit of your app's animations—we will find and fix bugs.
Implementing Swipe with Spring Completion
A typical case: swipe a card with dismiss animation when the threshold is reached. Structure:
class SwipeableCardView: UIView {
private var initialCenter: CGPoint = .zero
private let dismissThreshold: CGFloat = 120
@objc private func handlePan(_ gesture: UIPanGestureRecognizer) {
let translation = gesture.translation(in: superview)
let velocity = gesture.velocity(in: superview)
switch gesture.state {
case .changed:
center = CGPoint(x: initialCenter.x + translation.x,
y: initialCenter.y + translation.y)
let progress = abs(translation.x) / dismissThreshold
let angle = (translation.x / UIScreen.main.bounds.width) * 0.4
transform = CGAffineTransform(rotationAngle: angle)
alpha = 1 - min(progress * 0.3, 0.3)
case .ended:
let shouldDismiss = abs(translation.x) > dismissThreshold
|| abs(velocity.x) > 800
if shouldDismiss {
let direction: CGFloat = translation.x > 0 ? 1 : -1
let targetX = direction * UIScreen.main.bounds.width * 1.5
UIView.animate(
withDuration: 0.28,
delay: 0,
options: .curveEaseOut
) {
self.center.x = targetX
self.alpha = 0
} completion: { _ in
self.removeFromSuperview()
}
} else {
UIView.animate(
withDuration: 0.5,
delay: 0,
usingSpringWithDamping: 0.7,
initialSpringVelocity: 0.5
) {
self.center = self.initialCenter
self.transform = .identity
self.alpha = 1
}
}
default: break
}
}
}
Velocity threshold 800 pt/s is a critical detail. Without velocity check, a user who swipes quickly over a short distance will get a return instead of dismiss. That's frustrating. For overscrolling, we apply the rubber band effect: x' = x * d / (1 + x * 0.0015), where d is the stretch factor (0.55–0.75).
Step-by-Step Rubber Band Implementation
- Determine container bounds.
- Compute overflow beyond the bound:
overflow = offset - bound. - Apply transformation:
clamped = overflow * damping / (1 + overflow * 0.0015). - Return the object on release with a spring animation.
Why Correct Anchor Point Matters in Pinch
A common mistake in pinch implementation is not setting the view's anchorPoint to the point where the fingers converge. Without this, the object scales from its center instead of the touch point.
@objc private func handlePinch(_ gesture: UIPinchGestureRecognizer) {
guard let view = gesture.view else { return }
if gesture.state == .began {
let location = gesture.location(in: view.superview)
let anchorX = (location.x - view.frame.minX) / view.frame.width
let anchorY = (location.y - view.frame.minY) / view.frame.height
view.layer.anchorPoint = CGPoint(x: anchorX, y: anchorY)
view.center = location
}
let newScale = currentScale * gesture.scale
view.transform = CGAffineTransform(scaleX: newScale, y: newScale)
gesture.scale = 1.0
if gesture.state == .ended {
let clampedScale = max(minScale, min(maxScale, newScale))
if newScale != clampedScale {
UIView.animate(
withDuration: 0.35,
delay: 0,
usingSpringWithDamping: 0.65,
initialSpringVelocity: 0.3
) {
view.transform = CGAffineTransform(scaleX: clampedScale, y: clampedScale)
}
}
currentScale = clampedScale
}
}
Changing anchorPoint shifts the center—so view.center = location is mandatory right after modifying the anchor. For simultaneous pinch and pan handling, use a delegate:
func gestureRecognizer(_ a: UIGestureRecognizer,
shouldRecognizeSimultaneouslyWith b: UIGestureRecognizer) -> Bool {
return (a is UIPinchGestureRecognizer || a is UIPanGestureRecognizer)
&& (b is UIPinchGestureRecognizer || b is UIPanGestureRecognizer)
}
How to Add Haptic Feedback on Long Press
Long press is a gesture with a waiting state. Visual animation should show 'progress' until activation:
@objc private func handleLongPress(_ gesture: UILongPressGestureRecognizer) {
switch gesture.state {
case .began:
UIImpactFeedbackGenerator(style: .medium).impactOccurred()
UIView.animate(withDuration: 0.15) {
self.targetView.transform = CGAffineTransform(scaleX: 0.93, y: 0.93)
}
startContextMenuAnimation()
case .ended, .cancelled:
UIView.animate(
withDuration: 0.3,
delay: 0,
usingSpringWithDamping: 0.55,
initialSpringVelocity: 8
) {
self.targetView.transform = .identity
}
default: break
}
}
The shrink animation to 0.93 before the context menu appears is a pattern from native iOS apps. It gives the user visual confirmation that the gesture has been 'captured'.
Jetpack Compose: Concise Code for Gestures
In Jetpack Compose, gestures are implemented using Modifier.pointerInput:
Modifier.pointerInput(Unit) {
detectTransformGestures { _, pan, zoom, _ ->
offsetX += pan.x
offsetY += pan.y
scale = (scale * zoom).coerceIn(0.5f, 3f)
}
}
detectTransformGestures combines pan + pinch in a single handler. For spring return when exceeding bounds, use Animatable with animateTo and spring.
UIKit vs SwiftUI for Swipe
| Parameter | UIKit (UIPanGestureRecognizer) | SwiftUI (DragGesture) |
|---|---|---|
| Spring animation | UIView.animate(withDuration:delay:usingSpringWithDamping:) |
.animation(.spring(response:dampingFraction:)) |
| Velocity threshold | Manual check of .velocity |
Available via DragGesture.Value |
| Complexity | Medium (requires delegate) | Low (declarative) |
Our Process
| Stage | Description | Timeline (work days) |
|---|---|---|
| Analysis | Study mockups and animation requirements | 0.5 |
| Design | Create prototypes and gesture specifications | 0.5 |
| Implementation | Code in Swift/Kotlin with project integration | 1–2 |
| Testing | Test on real devices, debug | 0.5 |
| Deployment | Submit to TestFlight/Google Play Console | 0.5 |
What's Included
- Source code with comments and documentation
- Integration with existing architecture (if required)
- Configuration of code signing and provisioning profiles for iOS
- Consultation on App Store Review and Google Play guidelines
- One month of support after delivery
Timeline Estimates
Implementing a single gesture type (swipe or pinch) with spring return — 1–2 days. Full set — swipe + pinch + long press with haptics on both platforms — 3–5 days. We'll provide a precise estimate after reviewing your project.
Get a consultation from our gesture animation engineer for your app.