如何在 reactjs 和 framer-motion 中重新运行 animation 的序列

Question

i have a sequence of animations that i want to run for unlimited times, i tried this, it'works only for the first time, and the animation is not executed again

 async function sequence() { await animation.start({ x: line_1.current?.getBoundingClientRect()?.width, }); await animation.start({ y: -Number(_line.current?.getBoundingClientRect().height) / 2, }); await animation.start({ x: Number(line_2.current?.getBoundingClientRect()?.width) * 2, }); animation.start({ transition: { repeatDelay: 1, repeat: Infinity, repeatType: "loop", }, }); } useEffect(() => { sequence(); }, []); return <motion.div className="w-3 h-3 bg-red-600" animate={animation} />

what I want is to run every time from the start, thanks in advance

Answer 1

transition should be placed at the main element rather than inside the sequence , since the transition attributes would be applied to every animation calls.

async function sequence() {
    await animation.start({
      x: line_1.current?.getBoundingClientRect()?.width,
    });
    await animation.start({
      y: -Number(_line.current?.getBoundingClientRect().height) / 2,
    });
    animation.start({
      x: Number(line_2.current?.getBoundingClientRect()?.width) * 2,
    });
  }

  useEffect(() => {
    sequence();
  }, []);
  
  return <motion.div 
    className="w-3 h-3 bg-red-600" 
    animate={animation} 
    transition={{
        repeatDelay: 1,
        repeat: Infinity,
        repeatType: "loop",
    }}
  />