使用Framer Motion实现带裁剪效果的视差页面过渡

需求概述 #

为更清晰展示需求，我制作了Figma示意图：

需要实现页面间的过渡效果：一个覆盖全屏的滑动层，同时在该滑动层上添加视差盒（Parallax Box）。

尝试过的方案及问题 #

目前卡在视差盒的裁剪效果实现上，已尝试以下三种方案，但均存在问题：

• 将视差盒作为滑动层的子元素，设置从-100vw到0的位移动画，但视差盒出现从左到右滑动的异常表现；
• 为滑动层使用scaleX替代translateX做动画，但视差盒会被同步缩放，不符合预期；
• 给视差盒的clip-path属性添加动画，但滑动层使用了缓动函数，裁剪值难以精准计算，且视差盒自身也在滑动，效果无法匹配需求。

我已完成基础代码草稿，请基于此修改实现目标效果。

内容的提问来源于stack exchange，提问作者sheey