Skip to main content
P
3mo ago

Full Animation is Not Exporting

I'm having issues with Rive not exporting my full animation on 2 out of 4 Rive files I'm working with. In my Rive account, in both browser and desktop app (version Beta 0.8.1808 R), the full animation plays after hitting play on a selected scene. However, when I export that scene as a riv file and upload it to my hosting platform, only a partial amount of the animation plays. I'm exporting these files all the same way, so I don't understand why 2 of them are not fully exporting.

Using Chrome Browser (Version 128.0.6613.120) and Runtime version 2.20.0

Full Animation from Rive preview:



On my site via WebJS (autoplay is on):

I want to note that using a Rive Share link shows the full animation. However, I'm needing to use WebJS to have control over the animation via the parameters available.

1 reply
3mo ago

Hi , you sent me additional information over email, but I'm following up here to keep it out in the open as it may be helpful to other users.

In that video it appears that you're not specifying the desired artboard, animation or state machine to play when you create the Rive object. If not specified the default artboard and first animation will be played.

On the web you can specify an individual animation timeline to play: https://rive.app/community/doc/animation-playback/docDKKxsr7ko

However, I recommend using the state machine to setup the correct animation playback logic, and then at runtime you always play the state machine: https://rive.app/community/doc/state-machines/docxeznG7iiK

Also, take note that a single .riv file can have multiple artboards. So you should also specify the desired artboard you want to play at runtime.

See this example that demonstrates how to specify an artboard + state machine combination. The code should look something like this:

const riveInstance = new rive.Rive({
  // Load a local riv `clean_the_car.riv` or upload your own!
  src: "clean_the_car.riv",
  // artboard: "Artboard" // Optionally provide the artboard to display
  // Be sure to specify the correct state machine name
  stateMachines: "Motion", // Name of the State Machine to play
  // animations: "idle", // Optionally provide an animation timeline if you do not want to play a state machine.
  canvas: riveCanvas,
  layout: layout, // This is optional. Provides additional layout control.
  autoplay: true,
  onLoad: () => {
    // Prevent a blurry canvas by using the device pixel ratio
    riveInstance.resizeDrawingSurfaceToCanvas();
  },
});