rive not change animation

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?

[gzaban]

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

[avivian]

@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.