Cannot have multiple artboard on the same page

[wibimaster]

I'm using Angular 16.2.3, standalone way.

Each time I add more than one <canvas> in a component, I got an error...

main.ts

bootstrapApplication(AppComponent, {
  providers: [
    {provide: RIVE_FOLDER, useValue: 'assets/animations'},
    {provide: RIVE_WASM, useValue: 'assets/rive/rive.wasm'},
    {provide: RIVE_VERSION, useValue: '2.1.0'},
    {provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
    importProvidersFrom(IonicModule.forRoot({}), RiveModule),
    provideRouter(routes),
  ],
});

curtains.component.ts

import {Component, OnInit} from '@angular/core';
import {RiveCanvas, RiveLinearAnimation} from 'ng-rive';

@Component({
  selector: 'app-curtains',
  templateUrl: './curtains.component.html',
  styleUrls: ['./curtains.component.scss'],
  standalone: true,
  imports: [RiveCanvas, RiveLinearAnimation],
})
export class CurtainsComponent implements OnInit {
  constructor() {
  }

  ngOnInit() {
  }
}

curtains.component.html

<canvas
  riv="magic_ball"
  [artboard]="'CurtainsTopArtBoard'"
  width="1500"
  height="375"
  style="position: absolute;top: 0;left: 0;width: 100%;height: auto;aspect-ratio: 4"
  fit="fill">
  <riv-animation name="CurtainsTopOpening" play></riv-animation>
</canvas>

<canvas
  riv="magic_ball"
  [artboard]="'CurtainsSidesArtBoard'"
  width="1500"
  height="2250"
  style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"
  fit="fill">
  <riv-animation name="CurtainsSidesOpening" play></riv-animation>
</canvas>

Error thrown

zone.js:177 Uncaught BindingError: Expected null or instance of LinearAnimation, got an instance of Animation
    at Q (canvas_advanced.mjs:39:301)
    at Mb (canvas_advanced.mjs:50:38)
    at Rb.Pb [as toWireType] (canvas_advanced.mjs:51:399)
    at Wa.<anonymous> (canvas_advanced.mjs:58:8)
    at Wa.<anonymous> (canvas_advanced.mjs:80:10)
    at new LinearAnimationInstance (canvas_advanced.mjs:39:189)
    at RiveLinearAnimation.initAnimation (ng-rive.mjs:829:25)
    at ng-rive.mjs:838:62
    at map.js:7:37
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)

StackBlitz reproduction

https://stackblitz.com/edit/stackblitz-starters-nwmvhu?file=src%2Fcomponents%2Fcurtains%2Fcurtains.component.html

You can remove one canvas on the curtains.component.html file and check that it works again...

[GrandSchtroumpf]

Thanks for the issue. I can reproduce, but I didn't find any quick fix. Unfortunately I don't have much time to work on this library these days. If this is urgent I would recommend splitting the project into two .riv files.

[theemaster]

Thanks for the issue. I can reproduce, but I didn't find any quick fix. Unfortunately I don't have much time to work on this library these days. If this is urgent I would recommend splitting the project into two .riv files.

I am facing the same issue. I have several different .riv files for different animations. The issue occurs when using more than one animation at a time. E. g. I use 3 animations, the first two do not display and the last one (in the HTML tree the lowest) appears fine.

According to a post in Discord, a possible quick fix was to add a delay(e.g. 100ms) between the animations. I am not sure how to implement the delays. Any idea?

[localpcguy]

Given the example for multiple animations on a page in the 0.3.1 build, is this issue resolved? Maybe due to @rive-app/canvas-advanced being updated to 2.4.0?

~It's a bit random, but I am so far not able to reproduce it on the 0.3.1 release.~

Edit to add: While I couldn't replicate it after updating, our QA team was able to do so in the 0.3.1 version, so I think this is still an open issue. I tried to do a little digging to see where a fix could go, but I wasn't sure if it'd be here or upstream. The timing "fix" mentioned above seemed a little hacky, and sometimes even just 100ms would completely misalign animations.