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.
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!
This is EXACTLY what I was hoping and looking for โ thank you so much Lance, much much appreciated :)!!
Sorry
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%;
}