Skip to main content

<Loop>

available from v2.5.0

The <Loop /> component allows you to quickly lay out an animation so it repeats itself.

API​

The Loop component is a high order component and accepts, besides it's children, the following props:

  • durationInFrames (required): How many frames of the content the loop should include.

  • times (optional): How many times to loop the content. By default it will be Infinity.

  • layout: (optional): Either "absolute-fill" (default) or "none" By default, your content will be absolutely positioned. If you would like to disable layout side effects, pass layout="none".

  • style: (optional, available from v3.3.4): CSS styles to be applied to the container. If layout is set to none, there is no container and setting this style is not allowed.

info

Good to know: You can nest loops within each other and they will cascade. For example, a loop that has a duration of 30 frames which is inside a loop that has a duration of 75 will play 2 times. However, nested loops are not currently displayed in the timeline.

Examples​

All the examples below are based on the following animation of a blue square:

0
0:00 / 0:05

tsx
const MyVideo = () => {
  return <BlueSquare />;
};
tsx
const MyVideo = () => {
  return <BlueSquare />;
};

Continuous loop​

0
0:00 / 0:05

tsx
const MyVideo = () => {
  return (
    <Loop durationInFrames={50}>
      <BlueSquare />
    </Loop>
  );
};
tsx
const MyVideo = () => {
  return (
    <Loop durationInFrames={50}>
      <BlueSquare />
    </Loop>
  );
};

Fixed count loop​

0
0:00 / 0:05

tsx
const MyVideo = () => {
  return (
    <Loop durationInFrames={50} times={2}>
      <BlueSquare />
    </Loop>
  );
};
tsx
const MyVideo = () => {
  return (
    <Loop durationInFrames={50} times={2}>
      <BlueSquare />
    </Loop>
  );
};

Nested loop​

0
0:00 / 0:05

tsx
const MyVideo = () => {
  return (
    <Loop durationInFrames={75}>
      <Loop durationInFrames={30}>
        <BlueSquare />
      </Loop>
    </Loop>
  );
};
tsx
const MyVideo = () => {
  return (
    <Loop durationInFrames={75}>
      <Loop durationInFrames={30}>
        <BlueSquare />
      </Loop>
    </Loop>
  );
};

See also​