为了更好地说明我的想法,我用Figma绘制了它:
的数据
这在页面之间的过渡中使用。我想创建一个幻灯片,以涵盖整个页面,把一些贴纸(视差框)上。
困扰我的部分是,我不知道如何使视差框剪辑。我试过:
1.将视差作为幻灯片的子项,并使其从-100vw
到0
进行动画,但这会导致视差框的行为变得奇怪,就像从左向右滑动一样。
1.将scaleX
而不是translateX
应用于幻灯片,但视差框也在缩放。
1.制作视差框的clip-path
属性的动画,但幻灯片使用了缓动功能,因此很难计算剪辑值,而视差框也在滑动。
我在CodeSandBox上创建了一个草稿,请根据它修改。
1条答案
按热度按时间os8fio9y1#
通过设置幻灯片的
clip-path
属性的动画完成:https://github.com/framer/motion/issues/1005的数据。