Getting started with Rive and React

What if your Rive is rerendering infinitely or not rendering at all

Make it STOP!! Delete the 'flex' className below!

<div className="" 
    <Rive src="/einstein.riv" />
</div>

If the parent container is 'flex', the page will keep resizing, creating this crazy movement effect. The parent element must have a fixed height and width. From the docs:

the containing <div> element handles resizing and layout for you, and thus, all styles should be passed onto this element

What's with the dark background around our animation?

We forgot to make the artboard transparent

Select the artboard

Now change the artboard fill property from 50% to 0%

Fills

➕

⬛

313131

I added state to my Rive but its saying StateMachine exceeds max iterations

We have an animation with 2 states. Here is the code:


const { rive, RiveComponent } = useRive({
  src: "/einstein.riv",
  stateMachines: "State Machine 1",
  autoplay: true,
})
const boolean1 = useStateMachineInput(rive, "State Machine 1", "Boolean 1")

return (
  <>
    <button onClick={() => boolean1.value = true}>
      Set boolean1.value = true
    </button>
  </>
)

And here is our state machine in the Rive Editor

We have a condition set, Boolean 1, to move to the next state

Conditions

➕

Let's trigger that state change in our code, press the button below

The state should have moved from Timeline 1 to Timeline 2. But instead we're getting this error in our console and the state machine has stopped.

Click on the left arrow on the state machine to see our Timeline 2 to Timeline 1 condition.

There is our problem - we have a transition property from Timeline 2 to Timeline 1 but no condition. When Boolean 1 is true, state goes to Timeline 2, only to be immediatly sent back to Timeline 1, repeating infinitly.

Add a 'Boolean 1 - false' condition to resolve the problem.