Framer 运动路径 whileInview

Question

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>

      

Answer 1

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

Answer 2

I had the same issue, but I solved this using framer-motion 's useInView hook

import { motion, useInView } from 'framer-motion'
import React, { useRef } from 'react'

export function AnimatedPath() {
  const ref = useRef<SVGPathElement>(null)
  const isInView = useInView(ref)

  return (
    <svg>
      <motion.path
        ref={ref}
        initial={{ pathLength: 0 }}
        animate={{ pathLength: isInView ? 1 : 0 }}
        transition={{ duration: 0.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>
  )
}