使用framer-motion实现粘性内容随滚动滑出/滑入屏幕的动画问题求助

大家好，我在用framer-motion实现一个粘性内容的动画效果时遇到了瓶颈，想请教下各位的思路~

需求是这样的：我们有一个粘性按钮，需要在用户**向下滚动页面（手机端对应向上滑动）时，从屏幕底部平滑滑出；当用户向上滚动页面（手机端对应向下滑动）**时，再滑回屏幕内——这么做是为了让用户能获得更清晰的页面浏览视野。

我已经尝试复现这个场景，但目前的实现效果很不理想：滚动切换的时候动画一点都不流畅，有时候甚至会卡住。我猜想问题出在滚动时状态频繁变化，导致动画跟不上节奏？

有意思的是，如果我把transition的时长设为0，功能倒是完全正常，但这样就失去了动画的意义。所以我感觉这应该是个和动画延迟相关的问题，但实在找不到解决方向了...

备注：内容来源于stack exchange，提问作者Pixel