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.

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

Good to know: You can nest loops within each other and they will cascade.

API​

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

durationInFrames​

How many frames one iteration of the loop should be long.

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

stylev3.3.4​

optional

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.

Examples​

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

0
0:00 / 0:05

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

Continuous loop​

0
0:00 / 0:05

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

Fixed count loop​

0
0:00 / 0:05

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

Nested loop​

0
0:00 / 0:05

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

useLoop()v4.0.142​

A child component can use the Loop.useLoop() hook to get information about the current loop.
You should check for null, which is the case if the component is not inside a loop.

If inside a loop, an object with two properties is returned:

  • durationInFrames: The duration of the loop in frames as passed to the <Loop /> component.
  • iteration: The current iteration of the loop, starting at 0.
tsx
import React from "react";
import { Loop, useCurrentFrame } from "remotion";
 
const LoopedVideo: React.FC = () => {
  return (
    <Loop durationInFrames={50} times={3} name="MyLoop">
      <Child />
    </Loop>
  );
};
 
const Child = () => {
  const frame = useCurrentFrame(); // 75
  const loop = Loop.useLoop();
 
  if (loop === null) {
    // Not inside a loop
  } else {
    console.log(loop.durationInFrames); // 50
    console.log(loop.iteration); // 1
  }
 
  return <div>{frame}</div>;
};
tsx
import React from "react";
import { Loop, useCurrentFrame } from "remotion";
 
const LoopedVideo: React.FC = () => {
  return (
    <Loop durationInFrames={50} times={3} name="MyLoop">
      <Child />
    </Loop>
  );
};
 
const Child = () => {
  const frame = useCurrentFrame(); // 75
  const loop = Loop.useLoop();
 
  if (loop === null) {
    // Not inside a loop
  } else {
    console.log(loop.durationInFrames); // 50
    console.log(loop.iteration); // 1
  }
 
  return <div>{frame}</div>;
};

See also​