Rive animation

At a glance

The community member is trying to implement a Rive animation in Webstudio, but is having trouble getting it to show. Another community member suggests trying to embed it the way Rive provides. The original poster then shares an example code snippet that they found in the Rive documentation, which works for them. The community members express appreciation for Rive.

Useful resources

PPieterVP283

I'm trying to implement a Rive animation. Is there someone who knows how to do this in Webstudio?
I have tried with the html embed and hosting the riv file on google drive. But it is not showing.

4 comments

OOleg Isonen

have you tried embedding it the way its provided by rive?

OOleg Isonen

from them directly

PPieterVP283

Hi Oleg, you are right. I now used the example in https://rive.app/community/doc/web-js/docvlgbnS1mp and that works! I was relying to much on chatgpt's anwser 😳

For anyone else looking for an example:

Plain Text

<canvas id="canvas" width="500" height="500"></canvas>
<script src="https://unpkg.com/@rive-app/canvas"></script>
<script>
    const r = new rive.Rive({
        src: "https://cdn.rive.app/animations/vehicles.riv",
        // OR the path to a discoverable and public Rive asset
        // src: '/public/example.riv',
        canvas: document.getElementById("canvas"),
        autoplay: true,
        // artboard: "Arboard", // Optional. If not supplied the default is selected
        stateMachines: "bumpy",
        onLoad: () => {
          r.resizeDrawingSurfaceToCanvas();
        },
    });
</script>

MMr Bean

Nice I like Rive !

Add a reply

Join the Webstudio community

Rive animation