1

I was trying to use an rive animation for my angular web app

    <canvas riv="checkmark_icon" width="500" height="500">
        <riv-animation name="idle" [play]="animate" (load)="loadAnimation()"></riv-animation>
    </canvas>

So as per the documentation by ng-rive npm page I followed the steps. But I am getting this error in my console.

Initially I thought I was loading the animation in the pop up, hence the issue, so I tried loading animation on actual page but no help.

ERROR Error: Could not load animation before running it
    at RiveAnimationDirective.moveFrame (ng-rive.js:624)
    at MapSubscriber.project (ng-rive.js:618)
    at MapSubscriber._next (map.js:29)
    at MapSubscriber.next (Subscriber.js:49)
    at FilterSubscriber._next (filter.js:33)
    at FilterSubscriber.next (Subscriber.js:49)
    at SwitchMapSubscriber.notifyNext (switchMap.js:66)
    at SimpleInnerSubscriber._next (innerSubscribe.js:10)
    at SimpleInnerSubscriber.next (Subscriber.js:49)
    at MapSubscriber._next (map.js:35)

From the error only thing I can understand is there is some issue while loading animation, and the rive player is trying to play animation before it is getting loaded.

Nachiket Kamod
  • 61
  • 1
  • 9

2 Answers2

1

the name property takes the animation name, you have to provide the correct animation name. rive dashboard, see bottom left animation

name="ideal" for my project.

code isand
  • 26
  • 1
  • 1
0

I am having the same issue, and to me it seems that Rive is slightly out of date, as installing the package with npm in my Angular project introduced lots of JavaScript dependency errors. There doesn't seem to be much support for the tool on the web, maybe it has fallen out of maintenance?

I just checked and my versions are much higher than specified at this link: https://github.com/dappsnation/ng-rive

Gavin Jakubik
  • 1
  • 1