Smooth Bottom Sheet Animation: Avoiding Jank and Gesture Conflicts
A user pulls the Bottom Sheet up, but it doesn't respond or stutters — that's a classic UIPanGestureRecognizer issue. We encounter such cases regularly and know how to solve them. Below are approaches for iOS, Android, and Flutter with real-world examples.
Standard components often ignore gesture velocity and the sheet's current position. We use physical parameters to make the animation feel natural. For instance, on iOS we tie damping to velocity, giving smooth deceleration on fast swipes. On Android, a similar story with BottomSheetBehavior — when hideable = true and peekHeight equals content height, it may snap shut on accidental swipe. In Flutter, without a custom implementation you can't achieve a spring effect — we use SpringSimulation with precise tuning of stiffness and damping. On one project for a fitness chain, the Bottom Sheet had to open with under 100ms delay. After an audit, we chose a custom UIViewPropertyAnimator with damping ratio 0.85 — the animation took 350ms, frame rate locked at 60 FPS. This became the benchmark for other app screens.
Why Standard Components Don't Always Work
iOS: UISheetPresentationController (iOS 15+) is convenient, but adding a custom UIScrollView causes a conflict: the sheet starts collapsing instead of scrolling. Solution — a custom UIPresentationController overriding gestureRecognizerShouldBegin.
Android: BottomSheetBehavior from Material Components with hideable = true and peekHeight equal to content may close on accidental swipe — due to event propagation issues in NestedScrollView. We recommend disabling hideable or using a custom NestedScrollView with onNestedPreScroll.
Flutter: showModalBottomSheet doesn't give enough control. We use DraggableScrollableSheet with SpringSimulation. The modal_bottom_sheet package (by woltapp) offers a ready-made implementation with native physics.
How to Avoid Scroll-Gesture Conflicts
Conflict arises when the sheet and inner scroll both react to pan. On iOS we assign gestureRecognizerShouldBegin in UIPresentationController, checking if content is scrolling. On Android we use a custom NestedScrollView with onNestedPreScroll for interception. In Flutter, DraggableScrollableController lets you manage state.
How to Implement Smooth Animation on Each Platform
iOS: UIViewPropertyAnimator with UISpringTimingParameters, parameters tied to gesture velocity. Example:
let velocity = panGesture.velocity(in: view)
let springParams = UISpringTimingParameters(
dampingRatio: 0.8,
initialVelocity: CGVector(dx: 0, dy: velocity.y / remainingDistance)
)
let animator = UIViewPropertyAnimator(duration: 0.5, timingParameters: springParams)
Example Android configuration
val behavior = object : BottomSheetBehavior<View>(context, null) {
override fun onSlide(child: View, slideOffset: Float) {
// background dim animation
}
}
Android: Custom CoordinatorLayout.Behavior or MotionLayout for multiple snap points. onSlide dims background in parallel. MotionLayout can define up to 7 states, enabling complex scenarios (like three snap points).
Flutter: DraggableScrollableController + HapticFeedback.lightImpact() on snap. The modal_bottom_sheet package offers native physics. For precise tuning use SpringDescription with stiffness 300 and damping 0.6.
| Platform | Key Class | Feature |
|---|---|---|
| iOS | UIViewPropertyAnimator |
Velocity-linked damping |
| Android | MotionLayout |
Multiple snap points |
| Flutter | DraggableScrollableSheet |
SpringSimulation |
What About Keyboard and Safe Area?
Account for safe area: the sheet should not cover the Home indicator (Dynamic Island). Use safeAreaInsets for positioning. On keyboard appearance, move the sheet with synchronized animation (on iOS via UIKeyboardAnimationDurationUserInfoKey, on Android via WindowInsetsAnimationController). Haptic feedback improves perceived responsiveness by 35%.
Typical Mistakes
- Ignoring initialVelocity — animation doesn't follow the finger.
- Improper boundary handling: when sheet is fully scrolled to top, prevent closing. On iOS check
contentOffset.y <= 0, on AndroidscrollY == 0. - Missing keyboard sync: if keyboard is already open, sheet should open to its height minus offset.
Our Process and Timelines
- Audit current component or requirements.
- If design in Figma — transfer spring parameters directly.
- Develop on chosen platform.
- Test in slow animations mode + XCTest.
- Integrate into project.
Timelines: 1 to 3 days per platform depending on complexity. Exact cost calculated after assessment — includes post-release support for one month.
What's Included
| Component | Description |
|---|---|
| Custom component | Bottom Sheet with smooth animation and gesture support |
| Integration | Embedding into existing project |
| Documentation | Parameter descriptions and API |
| Support | 1 month post-release support |
About Our Experience
With extensive experience in mobile development, we have delivered over 30 mobile solutions. Our engineers are well-versed in Apple App Review and Google Play requirements — we guarantee guideline compliance. Custom UIViewPropertyAnimator outperforms standard UISheetPresentationController in animation control. For more on Apple's guidelines, see Human Interface Guidelines: Bottom Sheets.
Contact us for a project assessment. Get a consultation on Bottom Sheet animation — we'll analyze your scenario and propose the optimal solution.