Wizard Steps Animation for React, Angular, Vue etc

This is a Rive animation that you can change at runtime the state and the number. My initial goal was to use it for steps for a wizard.

You can use Rive animation with different specific Rive runtimes for Web(JS native), React, Vue, Angular.

It has 3 states(Idle_state, Active_Step, Checked_Step) that you can use for example like this with React:

  const idleInput = useStateMachineInput(rive, "Steps", "Idle_state");
  const activeInput = useStateMachineInput(rive, "Steps", "Active_Step");
  const checkedInput = useStateMachineInput(rive, "Steps", "Checked_Step");

and you can modify the number like this:

rive.setTextRunValue("Number_Incomplete", inputNumber.toString());
rive.setTextRunValue("Number_Active", inputNumber.toString());

I made a codesandbox that is shared in the details.

You can also look at the Rive docs: https://help.rive.app/runtimes/overview#installation-and-getting-started

Pay nothing or as much as you want.