Interactive Gesture Animations for Mobile Apps
We build gesture animations that don’t stutter or feel cheap. Our team has 5+ years in mobile development and over 20 projects with custom animations. The difference between gesture and regular animations is that gesture animations are interruptible. A user drags a card, changes their mind midway, and it must return with physically accurate behavior—not just snap back, but spring with accumulated velocity. That’s interactive gesture animation—animation driven by the finger in real time.
If you’re unsure about timelines, contact us—we’ll estimate the scope and cost for free.
Why Velocity Synchronization Is the Main Challenge
The key parameter of any gesture animation is the connection between the gesture velocity at release (gestureRecognizer.velocity) and the final animation parameters. If they aren’t synchronized, you get a “jump”: the finger moves at one speed, but the object finishes at another.
On iOS, UIViewPropertyAnimator handles this natively via continueAnimation(withTimingParameters:durationFactor:):
@objc func handlePan(_ gesture: UIPanGestureRecognizer) { let translation = gesture.translation(in: view) switch gesture.state { case .changed: animator?.fractionComplete = translation.y / totalDistance case .ended: let velocity = gesture.velocity(in: view) let springVelocity = abs(velocity.y) / (totalDistance - translation.y) let timing = UISpringTimingParameters(dampingRatio: 0.8, initialVelocity: CGVector(dx: 0, dy: springVelocity)) animator?.continueAnimation(withTimingParameters: timing, durationFactor: 0) default: break } } fractionComplete directly maps animation progress to gesture input. A value of 0.0 is start, 1.0 is end. The user literally drags the animation along. For deeper understanding, see UIKit documentation.
How to Implement Swipe-to-Dismiss Cards
The classic Tinder or to-do list pattern: the card follows the finger, at a threshold it flies away, below the threshold it returns.
Three parameters to calibrate:
- Release threshold—usually 30-40% of screen width or velocity > 800 pt/s
- Rotation angle—
transform = CGAffineTransform(rotationAngle: translation.x / screenWidth * 0.3)creates physical feel - Dismissal animation speed—must match gesture velocity, otherwise the card “hangs” in mid-air
On Android, we use ViewDragHelper or ItemTouchHelper for RecyclerView. ItemTouchHelper is good for lists but limited—custom feedback drawing requires overriding onChildDraw. In Flutter, Dismissible for simple cases, GestureDetector + AnimationController with fling() for complex ones. fling() directly accepts velocity from DragEndDetails.velocity.pixelsPerSecond—exactly the synchronization we explained.
Platform Comparison
| Parameter | iOS | Android | Flutter |
|---|---|---|---|
| Velocity sync | UIViewPropertyAnimator.continueAnimation |
ViewDragHelper + VelocityTracker |
fling(velocity) |
| Card swipe | fractionComplete + UISpringTimingParameters |
ItemTouchHelper + RecyclerView |
Dismissible + DragTarget |
| Custom pull-to-refresh | ScrollView offset + Lottie | Custom SwipeRefreshLayout + Lottie |
RefreshIndicator + AnimationController |
Pull-to-Refresh with Custom Animation
Standard UIRefreshControl and SwipeRefreshLayout do not support custom indicator animations. We implement via ScrollView with negative offset: when contentOffset.y < -threshold, we drive a custom indicator with progress = abs(offset.y) / threshold. Lottie animation, bound to setProgress(), gives arbitrary design. Use LottieAnimationView.setProgress() on iOS and LottieDrawable.setProgress() on Android to precisely link animation progress to offset.
Drag & Drop with Physical Behavior
On iOS—UIDragInteraction + UIDropInteraction for cross-app DnD, UILongPressGestureRecognizer + UIViewPropertyAnimator for in-app. Important: when lifting an item, add a scale animation (1.05) and shadow—visual feedback “I’m holding the object.” On return—UISpringTimingParameters with high dampingRatio (0.9) for a “soft landing”.
Testing and Calibration
- Enable Slow Animations in the simulator for visual debugging.
- Run Xcode Instruments—Animation Hitches on a physical device, keep GPU frame time under 16ms (60fps).
- Test all states: hold, fast swipe, retouch during animation.
- Ensure animation parameters (damping, stiffness) match the design.
Note
Use Xcode Instruments and Profile GPU Rendering on Android for in-depth debugging.Gesture animations must be tested on physical devices—emulators don’t reproduce accurate touch physics. Slow Animations in the simulator helps catch artifacts, but real feel is only on hardware. On Android, check GPU frame time via Profile GPU Rendering. For release builds, ensure ProGuard does not remove Lottie classes: add -keep class com.airbnb.lottie.** { *; }.
To calibrate animations for your design, contact us—we’ll account for all nuances.
What’s Included
- Development of animation prototype with parameter calibration
- Integration with your design (Lottie, Rive, or Core Animation)
- Testing on 5+ physical devices
- Delivery of documented source code
- Support for 2 weeks after release
Typical timeline: 2–3 days per gesture animation pattern, including integration and calibration. Cost is determined after analysis of your specific requirements. We guarantee smooth 60fps on all devices. Get a consultation for your project—contact us for an evaluation.