2

I have an app I'm building with Framer Motion and I'm trying to disable vertical swiping whenever someone swipes to the left or right page. I noticed that there are "lag spikes" or "freezes", and the swiping isn't smooth. When you swipe left/right it swipes to a certain point, pauses momentarily, and then continues. It's like little freezes, and I've identified it to be the case because I use onChangePage to toggle the drag value for the parent Page. When I comment it out, there aren't anymore freezes.

Demo: https://codesandbox.io/s/framer-motion-pages-shmd9

To replicate this, do quick swipes left/right. The freezes don't happen for any up/down motion because there aren't any changes being triggered by that, only left/right motion. When the onChangePage portion is commented out, the freezes don't happen for left/right motion as well. Any help is greatly appreciated, thank you.

EDIT: I understand that this happens due to re-rendering - but I seek to be able to have the vertical scroll functionality disabled the moment one swipes to the left/right, without having the re-rendering freeze occurring.

Ajay Pillay
  • 163
  • 1
  • 2
  • 15
  • For anyone viewing this now - I have solved it by using a different package, `react-swipeable-views`. – Ajay Pillay Jan 23 '21 at 09:50
  • 1
    For anyone viewing this even later - I have found an even better option, [Swiper JS](https://swiperjs.com/). [Code Sandbox demo here!](https://codesandbox.io/s/nested-full-page-swiping-8i7sv) – Ajay Pillay May 18 '21 at 18:53

0 Answers0