我正在尝试用Framer Motion制作一个简单的动画,其中一个组件从左边开始浮动并变为不透明。这个组件就在英雄部分的正下方,但在页面顶部时不显示在视口中(英雄部分是整个视口的高度)。组件在一个独立的div中而不是英雄部分。注意,如果这与此有关,我正在使用脉轮UI。我将它 Package 在motion.div元素中,如下所示:
<motion.div
initial={{ x: -400, opacity: 0}}
whileInView={{ x: 0, opacity: 1}}
transition={{ duration: 3 }}
viewport={{ once: true }}
>
<Box alignContent='right' id='about'>
<Flex>
<Spacer />
<VStack>
<Heading>Some heading</Heading>
<Text>
Some Text
</Text>
</VStack>
<Spacer />
</Flex>
</Box>
</motion.div>
动画在组件进入视区之前就开始了。我知道动画正在工作,因为当我在页面加载后快速滚动时,我看到它完成了一半。然而,如果我离开它几秒钟,然后向下滚动,动画就已经完成了。
我是新来的框架议案,只是按照例子。请让我知道,如果你看到我的错误。谢谢!
1条答案
按热度按时间icnyk63a1#
另一种方法是使用“useInView”钩子。你可以为你的元素定义一个ref,并使用该ref作为钩子的参数,这样它将观察该元素。
you can see the examples from here