[SOLVED] Could not load animation before running it Rive web

Could not load animation before running it Rive web

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.

Solution

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.