MotionScript

Column

An invisible vertical flex container. Lays its children out top-to-bottom, 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, Column, Rect } from '@motion-script/core';

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

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 column, align.x controls horizontal alignment: -1 left · 0 center · 1 right
paddingnumber | PaddingProps0Inset the content area from the node's edges

Size defaults

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

Animating

All props animate with .to():

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

export default createScene(function* (stage) {
  const col = createRef<Column>();

  stage.add(
    <Column ref={col} gap={16}>
      <Rect width={380} height={90} fill="#6990DD" cornerRadius={12} />
      <Rect width={380} height={90} fill="#E8617C" cornerRadius={12} />
      <Rect width={380} height={90} fill="#F5C26B" cornerRadius={12} />
    </Column>
  );

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

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

Notes

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