Skip to main content
6mo ago

Rive Layouts scaling

Hey! I have been excited to get into the layouts functionality and today have been testing it out in something simple which I think will be extremely useful for me in the future Rives I create. I've hit upon a stumbling block and haven't been able to locate anything regarding it in the docs, so looking for some advice ๐Ÿ™‚

I have created a very simple Rive, where one object will stay positioned to the top of the canvas and another object will stay positioned vertically central to the canvas.

The layout positioning works exactly how I intend, which is great (the first element stays positioned the same distance from the top, and the second element dynamically positions vertically central. However, this has the knock on effect of all of the objects staying the same size, no matter what the size of the canvas in the browser. I have the canvas set to fill the viewport completely, but the objects stay at a fixed pixel size.

I never actually create Rives to be shown at a particular pixel size, almost all of the objects are always sized depending on the viewport size (tends to be viewport width). So it would be great to know how to incorporate both the positional layout functionality, as well as scaling proportionally the Rive.

.rev file attached for reference.

layout-test.rev
1 KB


And just for further full reference, the code below I am using for the layout feature:

let layoutLayout = new rive.Layout({
fit: rive.Fit.Layout,
alignment: rive.Alignment.TopCenter,
});

Thank you very much in advance!

3 replies
6mo ago

Hey Bry Bry,

If you want to scale a group of elements, you'll need to put them in a nested artboard and set the mode to Leaf. In this example where the nested artboard is set to Fit Width, inside a layout that takes up half the width of the screen.

layout-test.rev
1 KB
6mo ago

This is EXACTLY what I was hoping and looking for โ€“ thank you so much Lance, much much appreciated :)!!

(edited) 6mo ago

Sorry , one further question! I usually use .riv exports in production, but for one particular project we likely need to use the embed code function.

When using embed code (iframe), it defaults to using fit Contain โ€“ is there a way to set an embedded rive using embed code, to use the new layout fit feature?

Code below and video attached for reference (note size 100% being set).


<div class="riv-test">
<canvas id="test" width="2400" height="1600"></canvas>
<iframe class="riv-iframe" style="border: none" width="100%" height="100%" src="https://rive.app/s/uGSPZmAQkEeoqURlS0Wqnw/embed" allowfullscreen allow="autoplay"></iframe>
</div>

.riv-test {
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
}

canvas {
width: 100%; height: 100%;
}

.riv-test canvas {
width: 100%;
height: 100%;
display: none;
}

iframe.riv-iframe {
width: 100%;
height: 100%;
}