Smooth Bottom Sheet Animation Without Jank and Gesture Conflicts

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) 

val behavior = object : BottomSheetBehavior<View>(context, null) { override fun onSlide(child: View, slideOffset: Float) { // background dim animation } }