Next.js React, framer-motion - useInView() not triggered

[francestu96]

Just try the following component in a Next.js project:

import { chakra, shouldForwardProp, VStack,Text, Image, Heading, Center, Stack } from '@chakra-ui/react';
import { motion, isValidMotionProp, useInView } from 'framer-motion';
import { useRef } from 'react';

const Test = () => {
  const refText = useRef(null)
  const refLogo = useRef(null)
  const isInViewText = useInView(refText, { once: true })
  const isInViewLogo = useInView(refLogo, { once: true })
  const textAnimation = { translateY: [100, 0], opacity: [0, 1] }
  const logoAnimation = { opacity: [0, 1], filter: ["blur(12px)", "blur(0px)"] }

  const ChakraBox = chakra(motion.div, {
    shouldForwardProp: (prop) => isValidMotionProp(prop) || shouldForwardProp(prop),
  })
  return (
    <Center width="full">
      <VStack maxW="container.xl">
        <Heading m="10">
            Vivamus vitae lacinia sem. In ac posuere leo. 
        </Heading>
        <Stack direction={["column", "column", "column", "row"]} px="10" gap={["10", "10", "10", "0"]}>
          <VStack width={["100%", "100%", "100%", "50%"]} gap="5" alignItems="start">
            <ChakraBox ref={refText} animate={isInViewText ? textAnimation : 'none' } transition={{ duration: "1", ease: "easeInOut" }} opacity="0">
              <Text fontSize="xl">Dui tempor accumsan. Vivamus vitae lacinia sem. In ac posuere leo. In fermentum efficitur nibh, eget molestie est pretium non. Vivamus gravida tellus sed quam sollicitudin aliquam. Integer ipsum eros, viverra vel mattis vel.</Text>
              <Text fontSize="xl" fontWeight="bold">Donec justo purus, iaculis vel laoreet in, convallis a nisl. Duis a tortor</Text>
              <Text fontSize="xl">Dui tempor accumsan. Vivamus vitae lacinia sem. In ac posuere leo. In fermentum efficitur nibh, eget molestie est pretium non. Vivamus gravida tellus sed quam sollicitudin aliquam. Integer ipsum eros, viverra vel mattis vel.</Text>
              <Text fontSize="xl">Donec justo purus, iaculis vel laoreet in, convallis a nisl. Duis a tortor</Text>
            </ChakraBox>
          </VStack>
          <ChakraBox width={["100%", "100%", "100%", "50%"]} display="flex" justifyContent="center" ref={refLogo} animate={isInViewLogo ? logoAnimation : 'none' } transition={{ duration: "2", ease: "easeInOut" }} opacity="0">
            <Image src={"/logo.png"} boxSize="sm" alt="logo" />
          </ChakraBox>
        </Stack>
      </VStack>
    </Center>
  );
};

export default Test;

The behaviour I got is quite weired. On mobile view, the isInViewLogo does not get triggered and pic will not show up. Is there something wrong with this code?

[mattgperry]

Please reopen with a sandbox reproduction

[PooneJabbari]

no solution yet?

[francestu96]

No... I gave up and used plain css for my use case