Repeating an element X times with a specific offset #728
-
Motion Canvas is a pretty interesting approach to animation! I'm used to DaVinci Resolve which already is fairly powerful, but I really see the appeal of a scripted animation workflow. I was wondering: what would be the most idiomatic way to create a repeating pattern? Ideally I'd have some kind of group element where I can set the number of horizontal/vertical repetitions along with their horizontal/vertical offset. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
There is no import {makeScene2D, Rect} from '@motion-canvas/2d';
import {waitFor, range} from '@motion-canvas/core';
export default makeScene2D(function* (view) {
view.add(
range(7).flatMap(x =>
range(5).map(y => (
<Rect
x={(x - 3) * 240}
y={(y - 2) * 240}
size={180}
fill={'white'}
/>
)),
),
);
yield* waitFor(1);
}); |
Beta Was this translation helpful? Give feedback.
There is no
Repeater
node at the moment (although it would be nice to have)Right now the preferred way of achieving this would be using
range()
.The example below will generate a 7x5 grid of rectangles, for example: