Help needed Local HTML Preview of .Riv with interactions not showing Vector Feathering.
Hi there I'm needing a bit of help with getting Vector Feathering working with a local HTML preview of my .riv file.
I'm working on confidential work that cannot be uploaded to online previewers so I made a simple HTML Template to drop my files into to ensure the rendering is working. However i'm unable to see the Vector Feathering in the Preview.
I've enabled the WebGL Draft Flag in chrome and it didn't seem to change anything.
This is my code below,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rive Animation Player - Interactive</title>
<style>
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background-color: #222; /* Dark Dark Grey Background */
}
canvas {
/* You can adjust canvas styling here if needed */
width: 200px; /* Example width */
display: block; /* Important for event listeners to work correctly on canvas */
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script src="https://unpkg.com/@rive-app/canvas@2.26.1"></script>
<script>
const r = new rive.Rive({
src: "Button.riv", // Your animation file
canvas: document.getElementById("canvas"),
autoplay: true, // Set to false if you want the SM to control initial state
stateMachines: "State Machine 1", // <-- UPDATED State Machine Name: "State Machine 1"
onLoad: () => {
r.resizeDrawingSurfaceToCanvas();
const canvas = document.getElementById('canvas');
const stateMachineName = 'State Machine 1'; // <-- UPDATED State Machine Name: "State Machine 1"
const inputName = 'Play enter'; // <-- UPDATED Input Name: "Boolean 1"
const stateMachine = r.stateMachine(stateMachineName);
const hoverInput = stateMachine.input(inputName);
if (hoverInput) {
canvas.addEventListener('mouseenter', () => {
hoverInput.value = true; // Mouse enter - set 'Boolean 1' Input to true
stateMachine.advance(); // Need to advance SM to apply input change
});
canvas.addEventListener('mouseleave', () => {
hoverInput.value = false; // Mouse exit - set 'Boolean 1' Input to false
stateMachine.advance(); // Need to advance SM to apply input change
});
} else {
console.error(`Input named "${inputName}" not found in state machine "${stateMachineName}".`);
}
},
});
</script>
</body>
</html>
same for me. i can't see the feathering in the browser, only in rive.
Try changing to WebGL. <script src="https://unpkg.com/@rive-app/webgl2@2.26.1"></script>