Framer Motion Path whileInview

user_19160827 0
Viewed 206

Why the path animation doesn't work in Google Chrome when animated with whileInView ,but in FireFox it works? This is svg i want to animate and his path below.

<motion.path

       initial={{pathLength:0}}
       whileInView={{pathLength:1}}
       transition={{duration:.5,delay:1.2}}
        d="M45.2116 113.844C41.991 97.7723 43.8806 74.0318 54.5835 60.6377C59.4391 54.561 76.8443 44.698 82.3209 55.553C88.3209 67.4466 67.1346 70.6046 64.5162 58.711C62.2011 48.1945 69.8349 39.3482 78.5027 34.5433C93.8215 26.0521 110.121 25.8784 125.958 33.0516"
        stroke="white"
        strokeWidth="0.78976"
        strokeMiterlimit="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </motion.svg>
framer-motion reactjs
1 Answers

I faced same problem when animating SVG paths. Ended up using react-intersection-observer to find if the element is in view and using animate prop instead of whileInView on motion.path

import { InView } from "react-intersection-observer"
import { motion } from "framer-motion"

const Component = () => {

const [entered, setEntered] = setState(false)

return(
    <InView
        as="div"
        onChange={(inView, entry) => {
          console.log("Inview:", inView, "entry:", entry)
          if (inView === true) {
            setEntered(true)
          }
        }}
        root={null}
        rootMargin="0px"
        threshold={0.8}>
        <svg>
            <motion.path
            initial={{pathLength:0}}
            animate={entered === true ? {pathLength:1} : {pathLength:0}}
            transition={{duration:.5,delay:1.2}}
            d="M45.2116 113.844C41.991 97.7723 43.8806 74.0318 54.5835 60.6377C59.4391 54.561 76.8443 44.698 82.3209 55.553C88.3209 67.4466 67.1346 70.6046 64.5162 58.711C62.2011 48.1945 69.8349 39.3482 78.5027 34.5433C93.8215 26.0521 110.121 25.8784 125.958 33.0516"
            stroke="white"
            strokeWidth="0.78976"
            strokeMiterlimit="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
            />
        </svg>
    </Inview>
    )
}

export default Component
user_150603780
Related