我正在尝试用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>

动画在组件进入视区之前就开始了。我知道动画正在工作，因为当我在页面加载后快速滚动时，我看到它完成了一半。然而，如果我离开它几秒钟，然后向下滚动，动画就已经完成了。
我是新来的框架议案，只是按照例子。请让我知道，如果你看到我的错误。谢谢！