Framer Motion: Animation Will not Loop

Question

I'm trying to loop an animation with the Framer Motion library after a small delay. The animation itself will play when it's mounted, on the webpage refresh, however does not repeat. Iv'e looked through the docs and this seems to be similar syntax.

const AnimateTrial = {
  initial: {
    opacity: 0,
    x: -100,
    y: -35,
    scale: 0.9,
  },
  animate: (i) => {
    const delay = 5 + i * 0.5;
    return {
      opacity: 1,
      x: -10,
      y: -35,

      transition: {
        opacity: { delay, duration: 1.5 },
        x: { delay, duration: 1.5},
        repeatType: "Infinity",
        repeatDelay: 5,
      },
    };
  }

Does anyone have an idea? Everything works minus bottom two lines!

Answer 1

The properties inside your transition object are not right. Use repeat in place of repeatType, Write it something like this

transition={{ repeat: Infinity, repeatDelay: 5 }}

If you check the docs repeateType property accepts only "loop" "reverse" "mirror" and not "Infinity".