Excited to share that our team Rive has launched Responsive Layouts today! Here is a 🧵 of some the new features and how to use them. Starting off with how to create a responsive menu.

Layout sizing using fixed, fill and hug.

Using percentage layout values to create content that just works across different devices and screen sizes.

Absolute (freely floating) vs relative (row/column) layouts

Layouts with Nested Artboards, and introducing layout animation.

Bones are compatible with layouts!

Joysticks too!

Our constraint system also works on top of layouts

We have added a built in state machine condition for Artboard size which will just work at runtime.

Using fractional sizing in order to size layout objects relative to one another.

A simple but beautiful example by @HelloJcToon showing the power of responsive layouts.

Another example, demonstrating a simple drag and drop interaction allowing an item to participate in a row/column style layout, but also be excluded when needed.

Stay tuned for more features in the coming weeks that build upon the power of layouts.

And of course layouts are designed to work seamlessly with Rive animations and state machines! We’re excited to see what you build next.