In this tutorial, Jeff from the Rive team demonstrates the transform properties available for layouts and artboards in Rive. If you are an interactive designer, motion designer, or UI animator looking to elevate your web and app assets, this step-by-step walkthrough covers everything you need to know about setting origin points, rotating layouts, scaling components, and animating artboard states on timelines.
The video opens with a practical demonstration using a layout structure containing a row with two cards. Each card contains an absolute-positioned tag anchored to one of its top corners. You will see how adjusting the rotation and scale properties affects individual elements as well as the entire layout group.
A central highlight of this feature update is the absolute control over the origin point (anchor point). By default, the origin is positioned at 0% on the X-axis and 0% on the Y-axis (the upper left corner). Changing these values to 50% X and 50% Y places the origin squarely in the center of the element, allowing it to scale and rotate uniformly around its midpoint.
Furthermore, the video highlights how layout parent-child relationships operate under these new controls. When you apply rotation, scale, or position shifts to a parent card layout, every child element inside it—including absolute-positioned tags, nested shapes, and text blocks—transforms together seamlessly.
Jeff also shares a powerful creative technique: positioning the origin point far outside the boundaries of the layout itself. By setting the X-origin to the middle (50%) and driving the Y-origin to extreme positive or negative offsets (such as 300 or -200), you can make elements swing along wide outer radii. This enables you to break up repetitive grids, build complex mechanical UI components, and add visual variety to your interactive responsive designs.
In addition to layouts, these transform properties extend directly to artboards. You will learn how to keyframe scale and rotation values on timeline states to construct responsive micro-interactions. Using a standard button design, Jeff demonstrates how to configure keyframes across different states:
- Idle State: 100% scale
- Hover State: 110% scale
- Click State: 90% scale
By combining these state scale values with custom easing curves and transition timing in Rive’s State Machine, you can build production-ready UI components with immediate visual feedback.
Finally, the tutorial explores component nesting. When an artboard with custom transform properties is converted into a component and placed into a secondary artboard, the artwork maintains its transformed state accurately while displaying the bounding box of the original layout boundaries.
