英文:
Create clipped parallax with framer motion
问题
为了更好地说明我的想法，我用 Figma 绘制了它的示意图：
这是在页面之间的过渡中使用的。我想创建一个滑块来覆盖整个页面，然后在上面放置一些贴纸（视差框）。
让我困扰的部分是，我不知道如何裁剪视差框。我尝试过以下方法：
- 将视差框作为滑块的子元素，并使其从
-100vw动画到0，但这会导致视差框的行为变得奇怪，好像从左到右滑动。 - 对滑块应用
scaleX而不是translateX，但是视差框也会缩放。 - 对视差框的
clip-path属性进行动画处理，但是滑块正在使用缓动函数，所以很难计算剪辑值，而且视差框也在滑动。
我在 CodeSandBox 上创建了一个草稿，请根据它进行修改。
英文:
To better illustrate my idea I have drew it with Figma:
This is used at the transition between pages. I want create a slide to cover whole page, the put some sticker(The parallax box) on it.
The part that bothers me is that, I do not know how to make the Parallax Box clipped. I have tried:
- Put the Parallax as a child of the slide, and make it animate from
-100vwto0, but this casues the Parallax Box to behave strange like sliding from left to right. - Apply
scaleXrather thantranslateXto slide, but the Parallax Box is also scaling. - Animate
clip-pathproperty of ParallaxBox, but the slide is using easing function so it is hard to calculate the clip value, while the Parallax Box is also sliding.
I have created a draft on CodeSandBox, please modify based on it.
答案1
得分: 0
通过动画化clip-path属性来完成幻灯片：https://github.com/framer/motion/issues/1005。
英文:
Done by animating clip-path property of the Slide: https://github.com/framer/motion/issues/1005.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论