This JavaScript code snippet is used to create a new instance of a Rive animation. Rive is a platform that allows developers to design and use interactive animations.
The rive.Rive constructor is used to create a new Rive object. The constructor takes an object as an argument, which contains several properties:
- src: This is the source of the Rive animation file. In this case, it's set to "#", which is a placeholder and should be replaced with the actual URL or path to the Rive file.
- canvas: This is the HTML canvas element where the animation will be rendered. It's obtained by calling document.getElementById("canvas"), which gets the canvas element with the ID of "canvas".
- autoplay: If this is set to true, the animation will start playing as soon as it's loaded.
- artboard: This is the name of the artboard in the Rive file that will be used. In this case, it's "New Artboard" which is the default name in Rive. If you change the name in your Rive file, be sure to change it here too.
- stateMachines: This is an array of state machines in the Rive file that will be used. In this case, there's only one state machine, "State Machine 1" which is the default name in Rive. If you change the name in your Rive file, be sure to change it here too.
- onLoad: This is a function that will be called when the Rive file is loaded. In this case, it gets the inputs for the state machine and resizes the drawing surface to match the canvas size.
