Skip to main content

<Loop>v2.5.0

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

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

You can nest loops within each other and they will cascade.

New alternative: loop prop​

Many components accept a loop nowadays.

It is useful if you want to mix it with other props such as trimBefore or playbackRate.

const WithSequence = () => (
  <Sequence durationInFrames={150}>
    <Sequence durationInFrames={50} loop>
      <BlueSquare />
    </Sequence>
  </Sequence>
);

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.

playbackRate?v4.0.528​

Changes the speed of the children within each iteration. Defaults to 1 and must remain constant across frames. Each iteration still lasts durationInFrames frames in the parent timeline. See playbackRate on <Sequence>.

times?​

How many times to loop the content. Default: Infinity.

layout?​

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

style?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.

Inherited propsv4.0.528​

<Loop> inherits premountFor, postmountFor, styleWhilePremounted and styleWhilePostmounted from <Sequence>. These props require layout="absolute-fill" (the default). Postmounting the end of the loop requires a finite times.

Examples​

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


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

Continuous loop​


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

Fixed count loop​


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

Nested loop​


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.
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>;
};

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​