Layout

Rive provides a number of ways in which to control how your animations are laid out in the canvas or view used to display it. Rive lets you control the fit, alignment and offset of rendered content.
The Layout object
Most runtimes have a Layout object. You typically provide layout data when instantiating a Rive object, and can update at any time.
Web
React
Flutter
Angular
1
<div>
2
    <canvas id="canvas" width="800" height="600"></canvas>
3
</div>
4
<script src="https://unpkg.com/rive-js"></script>
5
<script>
6
​
7
    // Fill the canvas, cropping Rive if necessary
8
    let layout = new rive.Layout({
9
        fit: rive.Fit.Cover,
10
    });
11
​
12
    // Fit to the width and align to the top of the canvas
13
    layout = new rive.Layout({
14
        fit: rive.Fit.FitWidth,
15
        alignment: rive.Alignment.TopCenter,
16
    });
17
​
18
    // Constrain the Rive content to (minX, minY), (maxX, maxY) in the canvas
19
    layout = new rive.Layout({
20
        fit: rive.Fit.Contain,
21
        minX: 50,
22
        minY: 50,
23
        maxX: 100,
24
        maxY: 100,
25
    });
26
​
27
    const r = new rive.Rive({
28
        src: 'https://cdn.rive.app/animations/vehicles.riv',
29
        canvas: document.getElementById('canvas'),
30
        layout: layout,
31
        autoplay: true
32
    });
33
​
34
    // Update the layout
35
    r.layout = new rive.Layout({ fit: rive.Fit.Fill });
36
</script>
Copied!
1
import Rive, { Layout, Fit, Alignment } from 'rive-react';
2
​
3
export const Simple = () => (
4
  <Rive
5
    src="https://cdn.rive.app/animations/vehicles.riv"
6
    layout={new Layout({ fit: Fit.Contain, alignment: Alignment.TopCenter })}
7
  />
8
);
Copied!
With the useRive hook:
1
import { useRive, Layout, Fit, Alignment } from 'rive-react';
2
​
3
export default function Example() {
4
  const { RiveComponent } = useRive({
5
    src: 'my-file.riv',
6
    artboard: 'my-artboard',
7
    animations: 'my-animation',
8
    layout: new Layout({
9
      fit: Fit.Cover,
10
      alignment: Alignment.TopCenter,
11
    }),
12
    autoplay: true,
13
  });
14
​
15
  return <RiveComponent />;
16
}
Copied!
Rive's Flutter runtime doesn't have a Layout object; instead fit and alignment can be passed in through the RiveAnimation and Rive constructors. The fit and alignment options behave like their counterparts in Flutter (see BoxFit and Size as examples).
Bounds options are absent; Flutter's layout engine and options are the preferred way to handle positioning Rive content.
1
// Fill the canvas, cropping Rive if necessary
2
var widget = const RiveAnimation.network(
3
  'https://cdn.rive.app/animations/vehicles.riv',
4
  fit: BoxFit.cover,
5
);
6
​
7
// Fit to the width and align to the top of the canvas
8
widget = const RiveAnimation.network(
9
  'https://cdn.rive.app/animations/vehicles.riv',
10
  fit: BoxFit.fitWidth,
11
  alignment: Alignment.topCenter,
12
);
Copied!
Angular runtime exposes the layout's options through inputs on the canvas.
1
<canvas riv="vehicles" width="500" height="500" fit="fitWidth" alignment="topCenter">
2
  <riv-animation name="idle" play></riv-animation>
3
</canvas>
Copied!
Fit
Fit determines how the Rive content will be fitted to the view. There are a number of options available:
Cover: Rive will cover the view, preserving aspect ratio. If the Rive content has a different ratio to the view, then the Rive content will be clipped.
Contain: Rive content will be contained within the view, preserving 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 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
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

Runtimes - Previous

Runtimes Quick Start

Next - Runtimes

Playback

Last modified 1mo ago

Copy link

Contents