state don't change the animation

[Khalil Khalil]

Hello,

I try to update the animation using a useState variable, but the animation wan't change,
is there any way to do this with Rive Component

<Rive
    className="loading-animation"
    src="/rive/loadinganimation.riv"
    useOffscreenRenderer={false}
    autoplay
    animations={dark ? "dark" : "light"}
/>

[Arthur Vivian]

Hey @Kassan424kh, this isn't supported right now, but should be easy enough to add. I'll get something in today.

In the mean time, this is possible using the useRive hook:

import { useEffect, useState } from 'react';
import { useRive } from 'rive-react';

const lightAnimation = 'light';
const darkAnimation = 'dark';

function App() {
  const [animation, setAnimation] = useState('light');

  const params = {
    src: 'light_dark.riv',
    autoplay: true,
  };

  const { RiveComponent, rive } = useRive(params);

  useEffect(() => {
    if (rive && animation) {
      // This could also be rive.pause(), depending on your use case.
      //
      // .stop() will reset the current animation to the beginning, so when it
      // plays again it will play from the start.
      //
      // .pause() will maintain the position of the current animation,
      // so when it plays again it will play from the point it was paused.
      rive.stop(rive.animationNames);
      rive.play(animation);
    }
  }, [rive, animation]);

  return (
    <>
      <div style={{ height: '500px', width: '500px' }}>
        <RiveComponent />
      </div>
      <button onClick={setAnimation(lightAnimation)}>Light</button>
      <button onClick={setAnimation(darkAnimation)}>Dark</button>
    </>
  );
}

export default App;

[Khalil Khalil]

Thank you very much @avivian, this would be very cool