MotionScript

Row

An invisible horizontal flex container. Lays its children out left-to-right, honouring gap, align, and padding. Use it when you want flex layout without a visible box, since it draws nothing itself.

0.0s / 4.0s

Usage

import { createScene, Row, Rect, Text } from '@motion-script/core';

export default createScene(function* (stage) {
  stage.add(
    <Row gap={24} padding={16}>
      <Rect width={140} height={140} fill="#6990DD" cornerRadius={12} />
      <Rect width={140} height={140} fill="#E8617C" cornerRadius={12} />
      <Rect width={140} height={140} fill="#F5C26B" cornerRadius={12} />
    </Row>
  );
});

Props

PropTypeDefaultDescription
gapnumber | 'auto'0Space between children. 'auto' distributes evenly (space-between)
alignAlignName | { x: number, y: number }'center'Child alignment. A named position ('center', 'topLeft', …) or a per-axis vector. In a row, align.y controls vertical alignment: 1 top · 0 center · -1 bottom
paddingnumber | PaddingProps0Inset the content area from the node's edges

Size defaults

Row defaults to width: 'hug', height: 'hug' — unless a direct child is width: 'fill', in which case Row defaults its own width to 'fill' too, so the child has real space to fill into. Give a child flex: 1 (or width: 'fill') to make it expand into remaining row space. See Size for the full rule.

Animating

All props animate with .to():

import { createScene, Row, Rect, createRef, easeOut } from '@motion-script/core';

export default createScene(function* (stage) {
  const row = createRef<Row>();

  stage.add(
    <Row ref={row} gap={24}>
      <Rect width={140} height={140} fill="#6990DD" cornerRadius={12} />
      <Rect width={140} height={140} fill="#E8617C" cornerRadius={12} />
      <Rect width={140} height={140} fill="#F5C26B" cornerRadius={12} />
    </Row>
  );

  // Spread items apart
  yield* row().to({ gap: 170 }, 0.8, easeOut);

  // Bring them back together
  yield* row().to({ gap: 24 }, 0.8, easeOut);
});

Notes

  • Row is equivalent to <Rect group="row" ...> but draws no box. Use Rect with group="row" when you also want a visible container.
  • align.x has no effect in a row (children are already laid out along the x axis).
  • See Layout for full docs on fill, hug, flex, and padding shorthands.