Rive animations states

[jptrinh]

Hey!
I was exploring some fun stuff with Rive. I can load the library with the NPM plugin, initialize the animation and interact with it.

But any idea on how I should handle it so that it reflects the state a specific component in a list for instance? (on load and on change)

[greg]

Hi Jean-Philippe,

I’m not able to help you with your question but I think you might be able to help me with mine. I’m trying to get Rive working in WeWeb and I’ve been unsuccessful. Could you send me a loom to show how you got this working?

[Mark_Pederson]

A RIVE plugin for WeWeb would be pretty awesome.

[jptrinh]

I’m sure there are way to make it simplier. But here is how I’ve made it work (mostly by reading Rive documentation).

1. Add the Rive package with NPM plugin
   

2. Add an HTML Embed that contains the canvas where the animation will be

<canvas class="like-button" width="80" height="80"></canvas>

3. Add trigger on page load to initialize Rive instances with custom JS

const buttons = wwLib.getFrontDocument().querySelectorAll('.like-button');
buttons.forEach((button, index) => {
  const r = new pluginVariables[/* @rive-app/canvas */ '69d4a5bb-09a3-4f3d-a94e-667c21c057eb']['@rive-app/canvas'].Rive({
    src: "your-file.riv",
    canvas: button,
    autoplay: true,
    stateMachines: "State Machine 1",
    onLoad: (_) => {
      r.resizeDrawingSurfaceToCanvas();
      const inputs = r.stateMachineInputs('State Machine 1');
      const trigger = inputs.find(i => i.name === 'Like');
      button.onclick = () => trigger.value = !trigger.value;
    }
    
  });
});

• Use the Rive method from the package from the initialization
  
  
• I’ve looped all the buttons on my page because I wanted to add that to a list of cards
• The onLoad callback is to set the triggers, the configuration depends on your animation inputs

[greg]

Thanks so much for this @jptrinh. It’s pretty similar to what I did but there must have been something off in my config.

Thanks!