rive not change animation

[Guy Tzaban]

Hey,
I try to do a dark mode vs light mode animation

it the same animation with different color

I try to replace the RIV file on state change but the canvas does not update and I see the old animation.
then I try to do in the Riv File 2 different animation with do name and change the animation

const params = {
    src: RiveAnimation,
    autoplay: true,
    animations: isDark ? "dark" : "light", // this is not working 
};

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

useEffect(() => {
    if (rive) {
      if (isDark) {
        console.log("dark");
        rive.stop("light");
        rive.play("dark");
      } else {
        rive.stop("dark");
        rive.play("light");
      }
      console.log(rive.playingAnimationNames);
    }
  }, [isDark, rive]);

and the animation does not update as well

any idea how to fix this?

[Arthur Vivian]

Hey @gzaban!

animations: isDark ? "dark" : "light" won't work right now as we're not listen to changes to the animation in the params right now within the hook, however we should and I'll push an update to make this work.

Your other method for changing animation should work though. I managed to get it working myself. If you could post some more complete example code and the file I can take a look!

[Guy Tzaban]

Thanks, @avivian
I will set an example and upload it later today.

[Guy Tzaban]

I Have Create SendBox for this Problem

https://codesandbox.io/s/rive-animation-test-dyomn?file=/src/App.js

import "./styles.css";
import { useRive } from "rive-react";
import RiveAni from "./gnome2.riv";
import { useState, useEffect } from "react";

export default function App() {
  const [isDark, toggleMode] = useState(false);

  const params = {
    src: RiveAni,
    autoplay: true,
    animations: ["dark", "light"] // this is not working
  };

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

  useEffect(() => {
    if (rive) {
      if (isDark) {
        console.log("dark");
        rive.stop("light");
        rive.play("dark");
      } else {
        rive.stop("dark");
        rive.play("light");
      }
      console.log(rive.playingAnimationNames);
    }
  }, [isDark, rive]);

  return (
    <div className="App">
      <div style={{ width: 600, height: 500 }}>
        <RiveComponent />
      </div>
      <button onClick={() => toggleMode(!isDark)}>
        Toggle Mode is:{isDark ? "dark" : "light"}
      </button>
    </div>
  );
}

`

[Arthur Vivian]

@gzaban Had a look into this. The easiest fix is to call reset() in between stopping and playing an animation.

rive.stop();
rive.reset();
rive.play("dark");

From looking at the file, it looks like your light animation overwrites the fill, but the dark animation doesn't (since it's already set on the design). This is why changing from dark to light works but not light to dark. When you stop an animation, any changes made to the artboard by previous animations persist and aren't undone unless you call reset. E.g Let say I have a circle who's animation changed it's size bigger and smaller in a loop, if I stopped the animation while it was big, the circle would remain big. That's essentially what's happening here. Your light animation sets the fill on the hat and chest but the dark animation doesn't. So you could fix the file such that the dark animation also sets the fill, but calling reset() works fine here as well :).

Another idea is to have a state machine for this file, with a toggle input between light and dark. Again not necessary, but could be worth exploring.

[Guy Tzaban]

Thanks a lot for the quick answer and for this plugin - The solution works great, I also understood the problem with my animation.

[Arthur Vivian]

Good to hear! I've created an issue for the problem of params not updating the animation here: #24