javascript - Framer Motion: Animation Will not Loop - Stack Overflow

admin管理员组

文章数量:1244386

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!

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!

• javascript
• reactjs
• framer-motion

Share Improve this question Follow asked Dec 21, 2021 at 13:00 n_d22n_d22 51311 gold badge77 silver badges2121 bronze badges 1

• repeat: Infinity --- write without quotes, Infinity is js variable – Hyzyr Commented May 12, 2023 at 12:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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".

Write without quotes

The number of times to repeat the transition. Set to Infinity for perpetual repeating. Without setting repeatType, this will loop the animation.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ repeat: Infinity, duration: 2 }}
/>

link is here

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},
        repeat: Infinity, 
        repeatDelay: 5,
      },
    };
  }

use repeat instead of repeatType

本文标签： javascriptFramer Motion Animation Will not LoopStack Overflow