Skip to main content

<Loop>

import { LoopExamples, BlueSquare } from "../components/LoopExamples/LoopExamples";

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:


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

Continuous loop


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

Fixed count loop


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

Nested loop


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