​
Responsive Layout

Rive’s new Layout feature lets you design resizable artboards with built-in responsive behavior, configured directly in the graphic. Just set a Fit of type Layout at runtime and the artboard will resize automatically. Optionally, provide a Layout Scale Factor to further adjust the scale of the content.

For more Editor information and how to configure your graphic see Layouts Overview.

The Alignment property will not have an effect when the using a Fit of type Layout.

Check the Feature Support page to see if this feature is already supported for your runtime.

Examples

Steps

  1. Set Fit to Fit.Layout - this will automatically scale and resize the artboard to match the canvas size when calling resizeDrawingSurfaceToCanvas().
  2. Optionally set layoutScaleFactor for manual control of the artboard size (scale factor).
  3. Subscribe to window.onresize and call resizeDrawingSurfaceToCanvas() to adjust the artboard size as the canvas and window changes.
  4. Subscribe to device pixel ratio changes and call resizeDrawingSurfaceToCanvas() to ensure the artboard updates correctly on various screen densities. For example, when dragging the window between multiple monitors with different device pixel ratios.
<style>
  body {
    background: #f0f0f0;
    margin: 0;
    overflow: hidden;
  }

  canvas {
    background-color: red;
    display: block;
    width: 100vw;
    height: 100vh;
  }
</style>

<canvas id="riveCanvas"></canvas>

<script src="https://unpkg.com/@rive-app/canvas@latest"></script>

<script>
  const rive = new Rive({
    src: "your-rive-file.riv",
    autoplay: true,
    canvas: riveCanvas,
    layout: new Layout({
      fit: Fit.Layout,
      // layoutScaleFactor: 2, // 2x scale of the layout, when using `Fit.Layout`. This allows you to resize the layout as needed.
    }),
    stateMachines: ["State Machine 1"],
    onLoad: () => {
      computeSize();
    },
  });

  function computeSize() {
    rive.resizeDrawingSurfaceToCanvas();
  }

  // Subscribe to window size changes and update call `resizeDrawingSurfaceToCanvas`
  window.onresize = computeSize;

  // Subscribe to devicePixelRatio changes and call `resizeDrawingSurfaceToCanvas`
  window
    .matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
    .addEventListener("change", computeSize);
</script>

​
Additional Layout Options

If the graphic doesn’t use Rive’s Layout feature, you can configure the layout with other Fit options and Alignment settings. See the sections below for more information on Fit and Alignment.

Use the Layout object to configure Fit and Alignment. See Fit and Alignment below for all enum options.

<div>
    <canvas id="canvas" width="800" height="600"></canvas>
</div>
<script src="https://unpkg.com/@rive-app/canvas@latest"></script>
<script>
    // Fill the canvas, cropping Rive if necessary
    let layout = new rive.Layout({
        fit: rive.Fit.Cover,
    });

    // Fit to the width and align to the top of the canvas
    layout = new rive.Layout({
        fit: rive.Fit.FitWidth,
        alignment: rive.Alignment.TopCenter,
    });

    // Constrain the Rive content to (minX, minY), (maxX, maxY) in the canvas
    layout = new rive.Layout({
        fit: rive.Fit.Contain,
        minX: 50,
        minY: 50,
        maxX: 100,
        maxY: 100,
    });

    const r = new rive.Rive({
        src: 'https://cdn.rive.app/animations/vehicles.riv',
        canvas: document.getElementById('canvas'),
        layout: layout,
        autoplay: true
    });

    // Update the layout
    r.layout = new rive.Layout({ fit: rive.Fit.Fill });
</script>

​
Fit

Fit determines how the Rive content will be fitted to the view. There are a number of options available:

  • Layout: Rive content will be resized automatically based on layout constraints of the artboard to match the underlying view size. See the above for more information on how to use this option.
  • Cover: Rive will cover the view, preserving the aspect ratio. If the Rive content has a different ratio to the view, then the Rive content will be clipped.
  • Contain: (Default) Rive content will be contained within the view, preserving the aspect ratio. If the ratios differ, then a portion of the view will be unused.
  • Fill: Rive content will fill the available view. If the aspect ratios differ, then the Rive content will be stretched.
  • FitWidth: Rive content will fill to the width of the view. This may result in clipping or unfilled view space.
  • FitHeight: Rive content will fill to the height of the view. This may result in clipping or unfilled view space.
  • None: Rive content will render to the size of its artboard, which may result in clipping or unfilled view space.
  • ScaleDown: Rive content is scaled down to the size of the view, preserving the aspect ratio. This is equivalent to Contain when the content is larger than the canvas. If the canvas is larger, then ScaleDown will not scale up.

​
Alignment

Alignment determines how the content aligns with respect to the view bounds. The following options are available:

  • Center (Default)
  • TopLeft
  • TopCenter
  • TopRight
  • CenterLeft
  • CenterRight
  • BottomLeft
  • BottomCenter
  • BottomRight

​
Bounds

The bounds for the area in which the Rive content will render can be set by providing the minimum and maximum x and y coordinates. These coordinates are relative to the view in which the Rive content is contained, and all must be provided. These will override alignment settings.

  • minX
  • minY
  • maxX
  • maxY

Was this page helpful?

Suggest editsRaise issue
Animation PlaybackState Machines