Framer motion whileInView activating before component is in viewport

Question

I'm trying to make a simple animation with Framer Motion where a component floats in and turns opaque from the left. This component is directly below the hero section, but does not appear in the viewport when at the top of the page(the hero section is the entire viewport height). The component is in a separate div than the hero section. Note that I am using Chakra UI if that has anything to do with this. I am wrapping it in a motion.div element as shown below:

<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>

The animation starts before the component is in the viewport. I know the animation is working, because when I scroll quickly after the page loads, I see it halfway finished. However, if I leave it for a few seconds and then scroll down, the animation is already complete.

I am new to Framer motion and just followed the examples. Please let me know if you see my mistake. Thanks!

Answer 1

In the viewport prop, add amount: 0.5 as a property. This results in the whileInView variant only being shown when at least 50% of the element is in view.

The default is 0, which means when any of the element is in view, and that typically will result in the animation starting when most of the element is not yet in view!

Link to the viewport prop docs: https://www.framer.com/motion/scroll-animations/###amount