Unleashing Creativity with Rive in Mendix

This article was cowritten with Marko Dogramadzi.

Web design trends are in perpetual motion. One of the most exciting new developments is the rise of interactivity through motion graphics and animations.

Enter Rive, a powerful animation platform bridging the gap between motion design and interactivity. It empowers designers to rapidly create and production-ready graphics for use on the web, mobile, and games.

What makes Rive so promising is its revolutionary state machine. Imagine an animated character capable of walking, jogging, and running. Each animation sequence becomes a distinct state. Pass the current state to the Rive runtime engine, and its state machine seamlessly handles any transitions, resulting in a fluid, engaging experience for end users. A game changer in interactivity.

Even the most elaborate designs and animations remain lightweight, often under 30KB. Say goodbye to hefty GIFs or video files. With Rive, animations load swiftly, enhancing overall performance.

Rive is intuitive to use for those already with a background in motion design. For complete novices eager to explore the world of animation, the Rive Getting Started page is a perfect place to start.

As you can tell, we’re huge fans of Rive. So that brought us to the question, can we bring Rive into Mendix in a low-code way?

Yes! In fact, we’ve created a brand-new widget for using Rives in your next Mendix project. Whether you’re creating captivating sign-up pages or visualizing the production line of a manufacturing plant, this widget lets you harness the power of production-ready graphics.

Rive State Machine

To configure the Mendix Rive Controller widget, it is important to understand how a Rive widget is controlled.

A Rive animation is encapsulated within a .riv file and can contain one or more state machines. State machines are collections of animations that allow for seamless transitions between different states, which you can use to create fluid and responsive UI elements.

A State Machine has several inputs, which can be one of three types:

  • Boolean Input: Acts as a switch that can be toggled on or off. Only one Boolean input per state machine can be set to true at a particular time.
  • Trigger Input: Similar to Boolean but can only become true for a short time. Useful for triggering a specific animation sequence and then returning back to a predefined state.
  • Number Input: Accepts an integer parameter to manage the animation display, such as determining how fast a character runs or tracking the number of stars left on a review.

Controlling these inputs allows you to execute all the possible animations and transitions defined in the Rive file.

So you’ve got a great idea for a Rive animation. How do you embed it in your Mendix app?

Creating your first Rive

We’re going to create an interactive login page. The page allows a user to enter their log credentials under the watchful eye of a bear!

[If you’re interested in learning more about the creation of our bear, the team at Rive have put together a detailed blog explaining its creation.]

  1. To get started we first need to create and export a Rive as a .riv file.

We’re going to use the Bear from the Rive Community, created by Juan Carlos, which you can download here.

  1. Download and import the Rive Animation Controller module from the Mendix Marketplace into your project.

Storing .riv files

Within the Rive Controller module, there is an overview page for managing the .riv files to be displayed in the application. This allows any number of .riv files to be hosted within the application itself and served on-demand to the Rive Canvas widget when it is loaded onto the page.

When adding a Rive file, the ‘Rive name’ property must be specified. This name is used within the Rive Controller widget parameters (Rive Name) to point the widget at the correct Rive.

  1. Add RiveFile_Overview to your navigation, making it accessible to Admins. This is where you’ll host your .riv files
  2. Run your app, and access the RiveFile_Overview page.
  3. Upload our .riv file providing a unique ‘Rive Name.’ In this example we’ll simply name it ‘bear’.

Inspecting the State Machine

Before integrating a Rive file into our application, we first want to understand all the interactions it supports.

Visual Studio Code offers a handy extension, vscode-rive-viewer, which allows developers to open a .riv file directly within the editor. This tool provides a clear view of the available State Machines and their corresponding Inputs.

Our Bear supports five inputs:

2 Booleans Inputs (Success and Fail)

2 Trigger Inputs (Check and Hands Up)

1 Number Input (Look)

Create our interactive login page

  1. Create a New Page ‘Login’ with two input fields: Username and Password.

Managing Rive Animations with the RiveState Entity

The Rive Animation Controller module features a versatile non-persistent entity (NPE), RiveState, designed to manage the current state of a Rive animation. This entity encompasses all the standard attributes necessary for an animation’s operation. However, when dealing with Number Inputs, which influence the animation’s behavior based on numerical values, additional steps are required.

We advise extending the RiveState by creating a specialized entity. This specialized entity will inherit the common attributes and allow you to add custom Number Inputs.

  1. Create a new Entity ‘Bear’, which is a generalization of RiveState. Add our Number Input as an integer attribute ‘LookValue’.
  2. Add a Data View to our page which returns Bear object and acts as the data source for our Rive animation.
  3. Add the RiveController widget within this data view
  1. Configure the Rive Controller Properties according to the Bears State Machine Model (from Step 5).

Widget Parameters

We want the Rive Controller widget to be capable of displaying all possible Rive animation files through configurable widget properties. The following parameters need to be set as inputs to the widget:

    • Rive Name: Name of Rive file (as set in the RiveFile entity)
    • State Machine Name: State Machine name for Rive file
    • Boolean Input Names: Name of all ‘Boolean’ state machine inputs for the Rive
    • Active Input (Boolean): Name of Active Boolean state machine input (which can be updated by changing the attribute value)
    • Trigger Input Names: Name of all ‘Trigger’ state machine inputs for the Rive
    • Active Input (Trigger): Name of Active Trigger input name (can be set by changing the attribute value)
    • Number Input Names: Name of all ‘Number’ state machine inputs for the Rive, with an Integer attribute providing the value for each Number input

Run the project and success! Our bear is watching over our login form.

Next we’ll add interactivity so the bear responds to a user’s input.

Controlling the animation

The ‘active’ Boolean and Trigger state machine input attributes allow you to configure the animation to update by updating the value of the attribute to the name of the input. It is best to do this in a nanoflow.

For Boolean inputs, set the value of the ‘Active Input (Boolean)’ attribute to the name of the Boolean input that you want to be active. The rest will be set as inactive.

For Trigger inputs, set the value of the ‘Active Input (Trigger)’ attribute to the name of the trigger input you want to fire. The widget will automatically set the attribute value to an empty string after the trigger is fired.

For Number inputs, the Number attribute corresponding to a certain Number input can be updated at any time. The animation will update to reflect the new value.

This means that microflows/nanoflows can trigger certain animations to occur, ensuring that the Rive is fully integrated into the Mendix application.

  1. Add interactivity to our bear.

For each interaction create a Nanoflow which changes the state corresponding to the user action.

Interaction Model

Interaction Input Type Logic
On Enter of Username Input Boolean Change Boolean Input ‘ActiveStateNameBoolean’ to “Check”.

 

The bear will look down.
On Change of Username input Number Change Number Input ‘LookValue’ to the character length of the username.

 

The bears eyes will move from left to right as the user types.
On Enter of Password input Boolean Change Boolean Input ‘ActiveStateNameBoolean’ to “hands_up”.

 

The bear cover its eyes with its paws.
Clicking Login Trigger If login successful, change the trigger input ‘ActiveStateNameTrigger’ to “success”, making the bear smile.

 

If login unsuccessful, change the trigger input ‘ActiveStateNameTrigger’ to “fail”, making the bear gasp.

 

Continue to build out the remaining interactions within your project.

Run the app, and we now have our fully interactive Bear login screen!

Interactive Working Example

You can check out the completed interactive login screen inside our demo application here.

Simply use the credentials below:

Username: Admin

Password: rivepassword

The Rive Animation Controller module contains all the examples mentioned here to help you get started.

Download the Rive Animation Controller and add some motion design into your next Mendix app!