An animation that fits any screen.

Make an animation that fits any screen in your browser, nothing uploaded: lay parts out in rows and columns, keep a picture's corners, and let a list scroll.

By Suraj Kumar5 November 20266 min read

An animation drawn for one size often looks wrong at another: a label grows longer than its button, a list gains a row, a phone is narrower than the design. KeepSimp's Animation maker can place parts by rules instead of by hand, keep a picture's corners as it stretches, and let a group scroll, all in your browser with nothing uploaded.

Rules instead of places.

A part placed by hand stays where you put it. When something next to it changes size, you move it again, and again for every size the animation will be shown at.

A layout places parts by rules: one after another, this far apart, this far from the edge. When a part grows or the group gets wider, the rest move to make room by themselves.

A row or a column, with gaps.

Choose a group and turn on Lay out what is in it. Its parts are placed one after another in a row or a column, with a gap between them and padding inside the group's edges. Wrap onto more lines lets a full row carry on underneath.

Spread along says where the room that is left goes: the parts together at the start, the middle or the end, or the room shared out between them, around them or evenly. Line up across places them across the row: at the start, the middle or the end, or stretched to fill it. The group itself can keep a fixed size or fit what is in it.

These are the rules web pages use for flexbox. They are worked out by Yoga, the layout engine Rive's runtime uses too, so a .riv places every part where the editor does.

Fixed, fit its content, or fill.

Each part in a layout has a rule for its width and one for its height. Fixed keeps the size it was drawn at. Fit its content sizes it to what is inside it, so a laid-out group grows with what it holds. Fill takes a share of the room that is left.

Shares are numbers: two parts that fill, at 1 and 3, take a quarter and three quarters. A layout can hold another layout, so a card can be a column inside a row of cards.

Pictures that keep their corners.

Stretch a picture of a rounded card or a speech bubble and its corners stretch with it, so round corners turn into ovals. Keep its corners (nine-slice) cuts the picture into nine pieces by four lines you place: the corners stay as they were drawn, the edges stretch one way, and the middle stretches both ways.

The edges and the middle can be stretched, or repeated for a border drawn as a pattern. It is the same idea as CSS's border-image on web pages.

A group that scrolls.

Scroll what is in it makes a group a window onto more than it shows: up and down, across, or both. In Try it, drag it or turn the mouse wheel over it.

Let go while it is moving and it carries on, slowing down. At the ends it can stop, or give a little as you pull past and spring back. It can also come to rest with a part lined up at its edge, which suits a row of cards.

Which files keep a layout.

A .riv keeps layouts, scrolling and nine-slice as Rive's runtime plays them, and the runtime reads the file back before it is offered, every part checked to stand where the editor puts it.

A Lottie or an animated SVG has no layouts: each part is written where the layout placed it, with keys where it moves. A group that scrolls is written where it starts, and a picture that keeps its corners is stretched whole in a Lottie; the result says each of these. A video or a GIF shows the layout as the timeline plays it.

A little less theory. A little more doing.

Try it on your own terms, with a free browser tool.

Try the tool